<template>
  <div>
    <div id="mapview"></div>
    <div id="topbar" v-show="jullipo">
      <button class="action-button esri-icon-measure-line" id="distanceButton" type="button" title="测量长度">
        地图卡尺
      </button>
      <button class="action-button esri-icon-measure-area" id="areaButton" type="button" title="测量面积">
        地图多边形测量
      </button>
    </div>

    <div class="rightco">
      <div @click="tuceng" class="right-1" id="listuut">
        <span class="listyee"><el-icon class="icons">
            <View />
          </el-icon></span>
        <span class="icontitle">图层</span>
      </div>
      <div class="right-1" @click="legend">
        <span class="listyee">
          <el-icon class="icons">
            <Operation />
          </el-icon></span>
        <span class="icontitle">图例</span>
      </div>
      <div class="right-1" @click="hyuttu">
        <span class="listyee">
          <el-icon class="icons">
            <SuitcaseLine />
          </el-icon></span>
        <span class="icontitle">测量</span>
      </div>
      <div @click="funryuan" class="right-1">
        <span class="listyee">
          <el-icon class="icons">
            <User />
          </el-icon></span>
        <!-- <div id="edit" v-show="bianjiline"></div> -->
        <span class="icontitle">编辑</span>
      </div>
    </div>

    <!-- 图层控制弹窗 -->
    <div class="levelMapDialog" v-if="dialogTab">
      <el-tabs :tab-position="tabPosition" style="height: 100%" class="demo-tabs" @tab-click="moopeet" color="red">
        <el-tab-pane label="图层控制" style="height: 100%">
          <div class="title">
            <span class="tucengli">图层控制</span>
            <el-icon :size="20" @click="dialogTab = false">
              <Close />
            </el-icon>
          </div>

          <el-tabs v-model="activelist" class="demo-tabs" @tab-change="handleClickllo">
            <el-tab-pane label="底" name="Muen">
              <el-tree :data="arrtext" show-checkbox ref="tree" node-key="id" @check-change="handleCheck" />
            </el-tab-pane>
            <el-tab-pane label="源-面源" name="源-面源">
              <el-tree v-if="activelist == '源-面源'" :data="yuan_mianyuan" default-expand-all class="tucengstyle"
                show-checkbox node-key="sql" ref="treeRef" @check="handleCheckTree" />
            </el-tab-pane>
            <el-tab-pane label="源-点源" name="源-点源">
              <el-tree v-if="activelist == '源-点源'" :data="yuan_dianyuan" default-expand-all class="tucengstyle"
                show-checkbox node-key="sql" ref="treeRef" @check="handleCheckTree" />
            </el-tab-pane>
            <el-tab-pane label="网-管线" name="网-管线">
              <el-tree v-if="activelist == '网-管线'" :data="wang_guanxian" default-expand-all class="tucengstyle"
                show-checkbox node-key="sql" ref="treeRef" @check="handleCheckTree" />
            </el-tab-pane>
            <el-tab-pane label="网-井点" name="网-井点">
              <el-tree v-if="activelist == '网-井点'" :data="wang_jingdian" default-expand-all class="tucengstyle"
                show-checkbox node-key="sql" ref="treeRef" @check="handleCheckTree" />
            </el-tab-pane>
            <el-tab-pane label="厂" name="厂">
              <el-tree v-if="activelist == '厂'" :data="chang_list" default-expand-all class="tucengstyle" show-checkbox
                node-key="sql" ref="treeRef" @check="handleCheckTree" />
            </el-tab-pane>
            <el-tab-pane label="河" name="河">
              <el-tree :data="data3" default-expand-all class="tucengstyle" show-checkbox />
            </el-tab-pane>
            <el-tab-pane label="城" name="城">
              <el-tree :data="data4" default-expand-all class="tucengstyle" show-checkbox />
            </el-tab-pane>
            <el-tab-pane label="问" name="问">
              <el-tree :data="data5" default-expand-all class="tucengstyle" show-checkbox />
            </el-tab-pane>
            <el-tab-pane label="水质" name="水质">
              <el-tree :data="data6" default-expand-all class="tucengstyle" show-checkbox />
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="街道控制" name="街道控制">
          <span class="tucengli">
            <div>街道控制</div>
            <el-tree :data="data7" default-expand-all class="tucengstyle" show-checkbox style="height: 480px" />
          </span>
        </el-tab-pane>
      </el-tabs>
      <div class="loppkui" v-show="huuymol">
        <div>
          <el-button plain @click="checkAll">全选</el-button>
        </div>
        <div>
          <el-button plain @click="CheckOutAll">全不选</el-button>
        </div>
      </div>
    </div>

    <div v-show="LegEnd" class="LegEnd" id="LegEnd" draggable="true">
      <div class="LegEnd-concat">
        <div class="LegEnd-list" id="LegEndpole" v-for="(item, index) in listLegEnd" :key="index"
          @click="shoindex(index)">
          {{ item.list }}
        </div>
        <div class="LegEnd-agv" @click="LegEndagv">
          <el-icon>
            <Close />
          </el-icon>
        </div>
      </div>
      <div class="tuli-lenend">
        <el-tabs v-model="activeName" @tab-click="tabsClick">
          <el-tab-pane label="源" name="first">
            <div id="listbox"></div>
          </el-tab-pane>
          <el-tab-pane label="网" name="second">
            <div id="mesh"></div>
          </el-tab-pane>
          <el-tab-pane label="厂" name="third">
            <div id="factory"></div>
          </el-tab-pane>
          <el-tab-pane label="河" name="fourth">
            <div id="rivers"></div>
          </el-tab-pane>
          <el-tab-pane label="城" name="foryy">
            <div id="city"></div>
          </el-tab-pane>
          <el-tab-pane label="问" name="listu">
            <el-tabs v-model="activeloist" @tab-click="tabhcheng">
              <el-tab-pane label="按类型" name="first">
                <div id="askOne"></div>
              </el-tab-pane>
              <el-tab-pane label="按状态" name="second">2</el-tab-pane>
              <el-tab-pane label="按表格" name="third">3</el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div v-show="LegEndtwo" class="LegEndtwo"></div>

    <!-- <div>
      <el-dialog
        v-model="centerDialogVisible"
        title="在线人员位置"
        width="30%"
        center
      >
        <div class="topllterer">
          <span>用户名</span>
          <span
            ><el-input v-model="input" placeholder="请输入用户名搜索"
          /></span>
        </div>
        <div class="topllter">
          <span>二级工区</span>
          <span>
            <el-select v-model="valuem" class="m-2" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              /> </el-select
          ></span>
        </div>
        <div class="toplltere">
          <span>单位</span>
          <span>
            <el-select v-model="valuemlo" class="m-2" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              /> </el-select
          ></span>
        </div>
      </el-dialog>
    </div> -->
    <!-- 菜单按钮↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
    <div class="nuttyyt">
      <div class="sha">
        <div class="jiaxian-chaxun">
          <van-grid>
            <van-grid-item icon="photo-o" @click="inquire">
              <van-grid-item icon="photo-o" v-bind:title="message">
                <el-tooltip class="box-chaxun" effect="dark" content="查询" placement="bottom">
                  <el-icon size="20px">
                    <MapLocation />
                  </el-icon>
                </el-tooltip>
              </van-grid-item>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="jiaxian-xunjing">
          <van-grid>
            <van-grid-item icon="photo-o" @click="funtrr">
              <van-grid-item icon="photo-o" v-bind:title="message">
                <el-tooltip class="box-xunjing" effect="dark" content="管路寻径" placement="bottom">
                  <el-icon size="20px">
                    <Bicycle />
                  </el-icon>
                </el-tooltip>
              </van-grid-item>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="jiaxian-hengduan">
          <van-grid>
            <van-grid-item icon="photo-o" @click="listStr">
              <van-grid-item icon="photo-o" v-bind:title="message">
                <el-tooltip class="box-hengduan" effect="dark" content="横断面" placement="bottom">
                  <el-icon size="20px">
                    <Notification />
                  </el-icon>
                </el-tooltip>
              </van-grid-item>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="jiaxian-suyuan" @click="certerne">
          <van-grid>
            <van-grid-item icon="photo-o">
              <van-grid-item icon="photo-o" v-bind:title="message">
                <el-tooltip class="box-suyuan" effect="dark" content="节点溯源" placement="bottom">
                  <el-icon size="20px">
                    <SetUp />
                  </el-icon>
                </el-tooltip>
              </van-grid-item>
            </van-grid-item>
          </van-grid>
        </div>
        <div class="jiaxian-qingchu">
          <van-grid>
            <van-grid-item icon="photo-o">
              <van-grid-item icon="photo-o" v-bind:title="message">
                <el-tooltip class="box-qingchu" effect="dark" content="清除" placement="bottom">
                  <el-icon size="20px" id="deleteMapping">
                    <Delete />
                  </el-icon>
                </el-tooltip>
              </van-grid-item>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
    <div id="exportExcel">
      <button id="cancelExportExcel" class="esri-button">取消</button>
      <button id="exportExcelDone" class="esri-button">完成</button>
    </div>
    <!-- 菜单按钮弹出框 -->
    <el-dialog v-model="menutool" :draggable="true" :modal="false" width="940px">
      <div id="echartsmenu">
        <!-- <MenuToolDetail  :jdbglist='from.jdbgprops'  :dbbglist="from.dbbgprops" :menutoolpro="menutool"/> -->
        <div id="echartstool"></div>
      </div>
      <div id="from">
        <el-table :data="tableData" border :show-header="false">
          <el-table-column align="center" v-for="(item, index) in tableData" :key="index" width="160">
            <template #default="scope">
              {{ scope.row[index] || "--" }}
            </template>
          </el-table-column>
        </el-table>
        <!--       
        <el-table
          :data="tableData"
          :show-header="false"
          :border="true"
          :span-method="arraySpanMethod"
        >
        
          <el-table-column
            prop="date"
            label="Date"
            width="180"
            align="center"
          />
          <el-table-column
            prop="name"
            label="Name"
            width="180"
            align="center"
          />
          <el-table-column prop="address" label="Address" align="center" />
        </el-table> -->
      </div>
    </el-dialog>
    <!-- 横截面按钮弹出框 -->
    <el-dialog v-model="menutooltwo" :draggable="true" :modal="false" width="940px">
      <div id="echartsmenutwo">
        <!-- <MenuToolTwo /> -->
        <div id="echartstooltwo"></div>
      </div>
    </el-dialog>
    <!-- 查询按钮弹出框 -->
    <el-dialog v-model="inquiremenu" title="信息查看" width="340px" header-aria-level="0" :modal="false"
      style="top: 120px; margin-right: 160px">
      <p id="inquire-menu">X:{{ Xcoordinate }},Y:{{ Ycoordinate }}</p>
      <hr />
      <div class="demo-collapse" id="dongtai">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="节点" name="1" v-show="jiedianFalse">
            <div @click="jiedianClick">{{ fenquCode }}({{ jiedianwutan }})</div>
          </el-collapse-item>
          <el-collapse-item title="管线" name="2" v-show="guanxianFalse">
            <div style="font-size: 20px" @click="guanxianClick">
              {{ guanxianToCode }}-{{ guanxianTOId }} →
              {{ guanxianFromCode }}-{{ guanxianFromId }}
            </div>
          </el-collapse-item>
          <el-collapse-item title="分区" name="3">
            <div style="font-size: 14px">{{ fenquCode }} {{ fenquName }}</div>
          </el-collapse-item>
        </el-collapse>
        <el-table :data="chaxunTabData" v-show="chaxunTabList" style="height: 500px" :show-header="false">
          <el-table-column prop="values" width="180" />
          <el-table-column prop="name" width="180" />
        </el-table>
      </div>
      <!-- <el-dialog
          v-model="chaxunTabList"
          :title="`${fenquCode}(${jiedianwutan})`"
          width="340px"
          :modal="false"
         :draggable="true"
         :show-close="false"
        style="margin-right: 160px; top: 475px; overflow: auto"
         >
       
    </el-dialog> -->
    </el-dialog>
    <!-- 搜索查询 -->
    <div class="topr">
      <div>
        <!-- <el-select v-model="value" clearable placeholder="系统编号"> -->
        <el-select clearable placeholder="请选择" v-model="searchList" size="large" @change="xialaleibiaojianting">
          <el-option v-for="item in datalist.searchList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="nutty">
        <el-input v-model="inputbianhao" class="miiu" placeholder="请输入信息" clearable />
        <div @click="bianhao" id="btn_submit" style="
            background-color: white;
            border-radius: 5px;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
          ">
          <el-icon size="16px">
            <Search />
          </el-icon>
        </div>
      </div>
    </div>
    <!-- 物探编号弹出框 -->
    <el-button text dialogTableVisible> </el-button>

    <el-dialog v-model="dialogTableVisible" title="" width="300px" :modal="false" :draggable="true"
      style="margin-right: 156px; top: 120px; height: 400px; overflow: auto">
      <el-table :data="gridData">
        <el-table-column property="date" label="名称" width="150" />
        <el-table-column property="name" label="内容" width="200" />
      </el-table>
    </el-dialog>

    <!-- ============================== -->
    <!-- 新加编辑点线面 ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓  ↓ -->
    <div id="sketchPanel" class="esri-widget" v-show="bianjiline">
      <div id="startbuttons">
        <button id="point" data-type="point" class="esri-button starttool">
          绘制兴趣点
        </button>
        <button id="line" data-type="polyline" class="esri-button starttool">
          绘制路线
        </button>
        <button id="extrudedPolygon" data-type="polygon" class="esri-button starttool">
          绘制建筑物
        </button>
      </div>

      <div id="actionbuttons">
        <button id="cancel" class="esri-button">取消</button>
        <button id="done" class="esri-button">完成</button>
      </div>
      <div id="edgeoperationbuttons">
        <br />Select the edge operation:
        <div class="update-options" id="edge">
          <button class="esri-widget--button edge-button" id="none-edge-button" value="none">
            None
          </button>
          <button class="esri-widget--button edge-button edge-button-selected" id="split-edge-button" value="split">
            Split
          </button>
          <button class="esri-widget--button edge-button" id="offset-edge-button" value="offset">
            Offset
          </button>
        </div>
        Select the move operation:
        <div class="update-options" id="shape">
          <button class="esri-widget--button shape-button" id="none-shape-button" value="none">
            None
          </button>
          <button class="esri-widget--button shape-button shape-button-selected" id="move-shape-button" value="move">
            Move
          </button>
        </div>
      </div>
    </div>
    <div id="configurationDiv" class="esri-widget">
      <table id="configurationTable">
        <tbody>
          <tr>
            <td>
              <label><b>Tooltip/Label </b></label>
            </td>
          </tr>
          <tr>
            <td>
              <label for="tooltipOptionscheckbox" id="tooltipOptionscheckboxlabel">
                - Tooltip</label>
            </td>
            <td><input type="checkbox" id="tooltipOptionsheckbox" /></td>
          </tr>
          <tr>
            <td>
              <label for="labelOptionscheckbox" id="labelOptionscheckboxlabel">
                - Label</label>
            </td>
            <td><input type="checkbox" id="labelOptionscheckbox" /></td>
          </tr>
          <tr>
            <td>
              <label for="enabledcheckbox" id="enabledcheckboxlabel"><b>Snapping enabled (
                  <div id="snappingctrlkey">CTRL-key</div>
                  )
                </b></label>
            </td>
            <td><input type="checkbox" id="enabledcheckbox" checked /></td>
          </tr>
          <tr>
            <td>
              <label for="selfsnappingcheckbox" id="selfsnappingcheckboxlabel">
                - self snapping</label>
            </td>
            <td><input type="checkbox" id="selfsnappingcheckbox" /></td>
          </tr>
          <tr>
            <td>
              <label for="featuresnappingcheckbox" id="featuresnappingcheckboxlabel">
                - feature snapping</label>
            </td>
            <td><input type="checkbox" id="featuresnappingcheckbox" /></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="configurationInfoDiv" class="esri-widget">
      <b>Open configuration <span>&#8594;</span></b>
    </div>
    <!-- 新加编辑点线面 ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ -->
  </div>
</template>
<script setup>
import { loadModules } from "esri-loader";
import * as echarts from "echarts";
import EventBus from "@/assets/event-bus";
import { onMounted, ref, reactive, nextTick, watch, toRefs } from "vue";
// import MenuToolDetail from "@/components/auxiliary_detail/MenuToolDetail.vue";
// import MenuToolTwo from "@/components/auxiliary_detail/MenuToolTwo.vue";
import { defineProps, defineEmits } from "vue";
import * as XLSX from "xlsx";
import { ElMessage } from "element-plus";
import {
  getUserInfo,
  search_list,
  routing,
  traceSource,
  findBySurveyno,
} from "@/api/home";
import { getInfo } from "@/api/login";
const activeName = ref("first");
const activeloist = ref("first");
const activelist = ref("Muen");
const tabPosition = ref("left");
const tableData = ref([]);
const dialogTab = ref(false);
let huuymol = ref(false);
let LegEnd = ref(false);
let LegEndtwo = ref(false);
let dialogTableVisible = ref(false);
let chaxunTabList = ref(false);
let jiedianFalse = ref(false);
let guanxianFalse = ref(false);
let jullipo = ref(false);
let lianweiList = ref([]);
let gridData = ref([]);
let chaxunTabDataPoint = ref([]);
let chaxunTabDataLine = ref([]);
let chaxunTabData = ref([]);
let chaxunTabStr = ref();
let chaxunTabStrLine = ref();
let searchList = ref([]);
let inputbianhao = ref();
let Xcoordinate = ref("");
let Ycoordinate = ref("");
let twocoordinate = ref([]);
let eventlist = ref([]);
let fenquCode = ref("");
let fenquName = ref("");
let guanxianTOsurvey = ref("");
let guanxianFromsurvey = ref("");
let guanxianTOId = ref("");
let guanxianFromId = ref("");
let guanxianToCode = ref("");
let guanxianFromCode = ref("");
let jiedianwutan = ref("");
let pointTobeAdd;
let from = reactive({
  jdbgprops: [],
  dbbgprops: [],
});
let message;
let sandianZone = [];
let sandianZtwo = [];
let zhexianZ = [];
let xunjingPath = [];
let newGuanluxunjingObjectid = ref("");
// let xunjingPathp1 = ref([]);
let arrjdbglist = ref([]);
let arrdbbglist = ref([]);
let arrhengduanmianlist = ref([]);
var sandianlist = ref([]);
let lw_ids = ref("");
let sandiandata = ref([]);
let zhexiandata = ref([]);
const resultb = ref([]);
const resultarr = ref([]);
let bianjiline = ref(false);
let arrjiedian = ref([]);
let arrguanxian = ref([]);
let daiChaShou = ref([]);
let zhixingzhenggai = ref([]);
let daiHeCha = ref([]);
let wanChengHeCha = ref([]);
var lianwei1;
var lianwei2;
var lianwei3;
var lianwei4;
var lianwei5;
var lianwei6;
var lianwei7;
var lianwei8;
var lianwei9;
var lianwei10;
var lianwei11;
var pt = ref({});
var flag;
const centerDialogVisible = ref(false);
const datalist = reactive({
  searchList: [],
});
const wutancan = reactive({
  fromsurveyno: "",
  tosurveyno: "",
});
const suyuancan = reactive({
  surveyno: "",
});
let menutool = ref(false);
let menutooltwo = ref(false);
let inquiremenu = ref(false);
let funter = ref(false);

// 父组件传过来的地址，定义接受参数
let pictruePath = defineProps({
  propsList: {
    uploadList: Array,
  },
  propsSubmit: {
    submitButton: Boolean,
  },
  propsChengguoDaoChu: {
    chengGuoDaoChu: Boolean,
  },
  propsSure: {
    sureButton: Boolean,
  },
  propsTreatCheck: {
    TreatCheck: Boolean,
  },
  propsObject: {
    propsObjectid: Array,
  },
  propsCorrective: {
    corrective: Boolean,
  },
  propsVerifiable: {
    verifiable: Boolean,
  },
  propsCheckFinish: {
    checkFinish: Boolean,
  },
});
let newUploadPhotoPath = ref();
let newSubmit = ref();
// 监听传过来的值
// watch(pictruePath, (newval, oldval) => {
//   console.log(newval, "新值");

// });

let MapImageLayer_data = null

onMounted(() => {
  _createSceneview();
  // 获取用户详细信息
  getInfo().then((ok) => {
    // console.log(ok.user.userId, "okkkkkkkkkkkkkkkkkkkk");

    // 获取用户图层信息请求
    getUserInfo(ok.user.userId).then((res) => {
      lianwei1 = res.data.layers[0];
      lianwei2 = res.data.layers[1];
      lianwei3 = res.data.layers[2];
      lianwei4 = res.data.layers[3];
      lianwei5 = res.data.layers[4];
      lianwei6 = res.data.layers[5];
      lianwei7 = res.data.layers[6];
      lianwei8 = res.data.layers[7];
      lianwei9 = res.data.layers[8];
      lianwei10 = res.data.layers[9];
      lianwei11 = res.data.layers[10];
    });
  });
  filterData(yuan_mianyuan, "draintype", "drainsubtype");
  filterData(yuan_dianyuan, "pointtype", "subtype");
  filterData(wang_guanxian, "linktype", "subtype");
  filterData(wang_jingdian, "pointtype", "subtype");
  filterData(chang_list, "pointtype", "subtype");
  // 默认全部选中
  yuan_mianyuan.forEach((element) => {
    mianyuan_checked.push(element.sql);
  });
  yuan_dianyuan.forEach((element) => {
    dianyuan_checked.push(element.sql);
  });
  wang_guanxian.forEach((element) => {
    guanxian_checked.push(element.sql);
  });
  wang_jingdian.forEach((element) => {
    jingdian_checked.push(element.sql);
  });
  chang_list.forEach((element) => {
    chang_checked.push(element.sql);
  });
  // all_checked = [
  //   ...mianyuan_checked, ...dianyuan_checked, ...guanxian_checked, ...jingdian_checked, ...chang_checked,
  // ]
});
let xialacaidanchange = ref("");
let xialaleibiaojianting = (v) => {
  // console.log(v, '就啊哈佳佳');
  xialacaidanchange.value = v;
};
// console.log(lianweiList.value, "lianweiList.value");
// 定义内部方法
function _createSceneview() {
  let option = {
    url: "https://js.arcgis.com/4.27/",
    css: "https://js.arcgis.com/4.27/esri/themes/light/main.css",
  };
  loadModules(
    [
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/WebTileLayer",
      "esri/layers/MapImageLayer",
      "esri/widgets/DistanceMeasurement2D",
      "esri/widgets/AreaMeasurement2D",
      "esri/widgets/Legend",
      "esri/widgets/Editor",
      "esri/layers/FeatureLayer",
      "esri/geometry/SpatialReference",
      //  新加编辑点线面↓  ↓  ↓  ↓  ↓  ↓
      "esri/layers/GraphicsLayer",
      "esri/widgets/Sketch/SketchViewModel",
      "esri/widgets/Expand",
      "esri/core/reactiveUtils",
      "esri/geometry/geometryEngine",
      "esri/geometry/Polyline",
      "esri/geometry/Polygon",
      "esri/Graphic",
      "esri/rest/support/Query",
      "esri/rest/query",
      "esri/rest/identify",
      "esri/rest/support/IdentifyParameters",
      "esri/layers/ElevationLayer",
      "esri/geometry/Multipoint",
    ],
    option
  ).then(
    ([
      Map,
      MapView,
      WebTileLayer,
      MapImageLayer,
      DistanceMeasurement2D,
      AreaMeasurement2D,
      Legend,
      Editor,
      FeatureLayer,
      SpatialReference,
      GraphicsLayer,
      SketchViewModel,
      Expand,
      reactiveUtils,
      geometryEngine,
      Polyline,
      Polygon,
      Graphic,
      Query,
      query,
      identify,
      IdentifyParameters,
      ElevationLayer,
      Multipoint,
    ]) => {
      MapImageLayer_data = MapImageLayer
      var regionToExportCAD = null;
      let activeWidget = null;
      /** 新加编辑点线面↓*/
      const graphicsLayer = new GraphicsLayer({
        title: "Sketch GraphicsLayer",
      });
      const searchedGraphicLayer = new GraphicsLayer({
        title: "搜索到高亮显示的lyaer",
      });
      const polylineGraphicLayer = new GraphicsLayer({
        title: "搜索到高亮显示的lyaer",
      });
      let sd_district = new MapImageLayer({
        url: "http://192.168.0.100:6080/arcgis/rest/services/sd_district/MapServer",
        opacity: 0.5,
      });
      const dylw_dlURL =
        "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/MapServer";

      const tk = "bbc7cd9cdc82bd60c2ce5cfa3c50fbb6"; // 天地图秘钥
      let baseLayer_vec = new WebTileLayer({
        urlTemplate: `http://t{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=${tk}`,
        subDomains: [0, 1, 2, 3, 4, 5, 6, 7],
      });
      let baseLayer_cva = new WebTileLayer({
        urlTemplate: `http://t{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=${tk}`,
        subDomains: [0, 1, 2, 3, 4, 5, 6, 7],
      });
      let map = new Map({});
      let elevationLayer = new ElevationLayer({
        url: "http://192.168.0.100:6080/arcgis/rest/services/sddem/ImageServer",
      });
      map.ground.layers.add(elevationLayer);

      map.add(baseLayer_vec);
      map.add(baseLayer_cva);
      map.add(sd_district);
      const dylw_dlLayer = new MapImageLayer({
        url: dylw_dlURL,
        sublayers: [{
          id: 0
        },
        {
          id: 1
        },
        {
          id: 2
        },
        {
          id: 3
        },
        {
          id: 4
        },
        {
          id: 5
        },
        {
          id: 6
        },
        {
          id: 7
        },
        {
          id: 8
        },

        ]
      });
      EventBus.on("lizf", (val) => {
        console.log("11111111111111111111111111111111")
        dylw_dlLayer.findSublayerById(0).definitionExpression = val;
        console.log(val)
        console.log("2222222222222222222222222222222")


      })
      dylw_dlLayer.minScale = 2000;
      map.add(dylw_dlLayer);

      map.add(polylineGraphicLayer);

      var view = new MapView({
        container: "mapview", // Reference to the DOM node that will contain the view
        map: map, // References the map object created in step 3
        zoom: 12, // Sets zoom level based on level of detail (LOD)
        center: [113.2, 22.85],
      });
      //#region 物探编号
      const DATA = ref([]);
      const DATALine = ref([]);
      const DATADefect = ref([]);
      document.getElementById("exportExcelDone").addEventListener(
        "click",
        async function () {
          if (regionToExportCAD != null) {
            /**导出点的数据 ↓ ---------------------------------------------------------------------------*/
            console.log("下面写生成Excel的方法");
            let queryUrl =
              "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/MapServer/0";
            let queryObject = new Query();
            queryObject.where = "1=1";
            queryObject.returnGeometry = true;
            queryObject.outFields = ["*"];
            queryObject.spatialRelationship = "intersects";
            queryObject.geometry = regionToExportCAD;
            let results = await query.executeQueryJSON(queryUrl, queryObject);
            DATA.value = []
            results.features.forEach((element) => {
              // console.log(element.attributes, "循环后的值");
              DATA.value.push({
                小区名称: element.attributes.zone_name,
                小区编号: element.attributes.zone_code,
                物探编号: element.attributes.survey_no,
                点类型: element.attributes.pointtype,
                点属性: element.attributes.pointprop,
                点位置: element.attributes.pointposition,
                可见性: element.attributes.pointvisible,
                照片1: element.attributes.path1,
                照片2: element.attributes.path2,
                照片3: element.attributes.path3,
                上传账号: element.attributes.uploader,
                上传时间: element.attributes.uploadtime,
              });
            });
            // 创建工作簿
            const workbook = XLSX.utils.book_new();

            // 创建工作表
            const worksheet = XLSX.utils.json_to_sheet(DATA.value);

            // 将工作表添加到工作簿
            XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

            // 将工作簿保存为Blob对象
            const blob = new Blob(
              [XLSX.write(workbook, { bookType: "xlsx", type: "array" })],
              {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
              }
            );

            // 创建下载链接并触发下载操作
            const url = URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.href = url;
            link.download = "testPoint.xlsx"; // 设置下载文件的文件名
            document.body.appendChild(link);
            link.click(); // 触发下载操作
            document.body.removeChild(link);
            /**导出点的数据 ↑ -----------------------------------------------------------------------------*/
            /**导出线的数据 ↓ ----------------------------------------------------------------------------*/
            let queryLineUrl =
              "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/MapServer/1";
            let queryLineObject = new Query();
            queryLineObject.where = "1=1";
            queryLineObject.returnGeometry = true;
            queryLineObject.outFields = ["*"];
            queryLineObject.spatialRelationship = "intersects";
            queryLineObject.geometry = regionToExportCAD;
            let resultsLine = await query.executeQueryJSON(
              queryLineUrl,
              queryLineObject
            );
            DATALine.value = [];
            resultsLine.features.forEach((element) => {
              // console.log(element.attributes, "循环后的值");
              DATALine.value.push({
                小区名称: element.attributes.zone_name,
                小区编号: element.attributes.zone_code,
                起点物探编号: element.attributes.fromsurveyno,
                终点物探编号: element.attributes.tosurveyno,
                线类型: element.attributes.linktype,
                线子类: element.attributes.subtype,
                埋设方式: element.attributes.burytype,
                管道材质: element.attributes.pipemat1,
                起点埋深: element.attributes.frombury,
                终点埋深: element.attributes.tobury,
                照片1: element.attributes.path1,
                照片2: element.attributes.path2,
                照片3: element.attributes.path3,
                上传账号: element.attributes.uploader,
                上传时间: element.attributes.uploadtime,
              });
            });
            // 创建工作簿
            const workbookLine = XLSX.utils.book_new();

            // 创建工作表
            const worksheetLine = XLSX.utils.json_to_sheet(DATALine.value);

            // 将工作表添加到工作簿
            XLSX.utils.book_append_sheet(workbookLine, worksheetLine, "Sheet1");

            // 将工作簿保存为Blob对象
            const blobLine = new Blob(
              [XLSX.write(workbookLine, { bookType: "xlsx", type: "array" })],
              {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
              }
            );

            // 创建下载链接并触发下载操作
            const urlLine = URL.createObjectURL(blobLine);
            const linkLine = document.createElement("a");
            linkLine.href = urlLine;
            linkLine.download = "testLine.xlsx"; // 设置下载文件的文件名
            document.body.appendChild(linkLine);
            linkLine.click(); // 触发下载操作
            document.body.removeChild(linkLine);
            /**导出线的数据 ↑ ------------------------------------------------------------------------------*/
            /**导出Defect的数据 ↓ ----------------------------------------------------------------------------*/
            let queryDefectUrl =
              "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/MapServer/3";
            let queryDefectObject = new Query();
            queryDefectObject.where = "1=1";
            queryDefectObject.returnGeometry = true;
            queryDefectObject.outFields = ["*"];
            queryDefectObject.spatialRelationship = "intersects";
            queryDefectObject.geometry = regionToExportCAD;
            let resultsDefect = await query.executeQueryJSON(
              queryDefectUrl,
              queryDefectObject
            );
            DATADefect.value = [];
            resultsDefect.features.forEach((element) => {
              console.log(element.attributes, "循环后的值");
              DATADefect.value.push({
                单位名称: element.attributes.upload_unit,
                小区编号: element.attributes.zone_code,
                起点物探编号: element.attributes.fromsurveyno,
                终点物探编号: element.attributes.tosurveyno,
                线类型: element.attributes.line_defectmethod,
                // 线子类: element.attributes.subtype,
                // 埋设方式: element.attributes.burytype,
                // 管道材质: element.attributes.pipemat1,
                // 起点埋深: element.attributes.frombury,
                // 终点埋深: element.attributes.tobury,
                照片1: element.attributes.uploadpath1,
                照片2: element.attributes.uploadpath2,
                照片3: element.attributes.uploadpath3,
                审计员: element.attributes.auditor,
                审计时间: element.attributes.auditor_time,
                上传账号: element.attributes.uploader,
                上传时间: element.attributes.uploader_time,
              });
            });
            // 创建工作簿
            const workbookDefect = XLSX.utils.book_new();

            // 创建工作表
            const worksheetDefect = XLSX.utils.json_to_sheet(DATADefect.value);

            // 将工作表添加到工作簿
            XLSX.utils.book_append_sheet(
              workbookDefect,
              worksheetDefect,
              "Sheet1"
            );

            // 将工作簿保存为Blob对象
            const blobDefect = new Blob(
              [XLSX.write(workbookDefect, { bookType: "xlsx", type: "array" })],
              {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
              }
            );

            // 创建下载链接并触发下载操作
            const urlDefect = URL.createObjectURL(blobDefect);
            const linkDefect = document.createElement("a");
            linkDefect.href = urlDefect;
            linkDefect.download = "testDefect.xlsx"; // 设置下载文件的文件名
            document.body.appendChild(linkDefect);
            linkDefect.click(); // 触发下载操作
            document.body.removeChild(linkDefect);
            /**导出导出Defect的数据的数据 ↑ ------------------------------------------------------------------------------*/
          }
          exportExcel.style.display = "none";
          sketchViewModel.create();
          graphicsLayer.graphics = [];
          flag = 6;
        },

        false
      );

      document
        .getElementById("cancelExportExcel")
        .addEventListener("click", function () {
          console.log("22222");
          exportExcel.style.display = "none";
          graphicsLayer.graphics = [];
          sketchViewModel.cancel();
        });

      /**---------------------------物探编号-------------------------------------------- */
      document.getElementById("btn_submit").addEventListener(
        "click",
        function () {
          // 如果下拉菜单的值为物探编号------------------按照物探编号进行查询
          if (xialacaidanchange.value == "2") {
            // 拿到输入值的每一个字母
            let str = inputbianhao.value;
            var toquery = "";
            for (let i in str) {
              //  console.log(str[0],str[i],'字符串的每一项');
              //  判断条件
              if (str[0] == "D") {
                console.log("大良联围");
                toquery =
                  "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/MapServer/0";
              } else if (str[0] == "N") {
                // 南顺联安围
                (toquery = ""),
                  (toquery =
                    "http://192.168.0.100:6080/arcgis/rest/services/nslaw/MapServer/0");
              } else if (str[0] == "Q" && str[1] == "L") {
                // 群力围
                (toquery = ""),
                  (toquery =
                    "http://192.168.0.100:6080/arcgis/rest/services/qlw/MapServer/0");
              } else if (str[0] == "Q" && str[1] == "X") {
                // 齐杏联围
                (toquery = ""),
                  (toquery =
                    "http://192.168.0.100:6080/arcgis/rest/services/qxlwl/MapServer/0");
              } else if (str[0] == "Q" && str[1] == "S") {
                //  樵桑联围
                (toquery = ""),
                  (toquery =
                    "http://192.168.0.100:6080/arcgis/rest/services/qslw/MapServer/0");
              } else if (str[0] == "Z" && str[1] == "S") {
                //  中顺联围
                (toquery = ""),
                  (toquery =
                    "http://192.168.0.100:6080/arcgis/rest/services/zslw/MapServer/0");
              } else if (str[0] == "L" && str[1] == "C") {
                //  第二联围-乐从
                (toquery = ""),
                  (toquery =
                    "http://192.168.0.100:6080/arcgis/rest/services/delw_lc/MapServer/0");
              } else if (str[0] == "B" && str[1] == "J") {
                //  第二联围-北窖
                (toquery = ""),
                  (toquery =
                    "http://192.168.0.100:6080/arcgis/rest/services/delw_bj/MapServer/0");
              } else if (str[0] == "R" && str[1] == "G") {
                //  容桂联围
                (toquery = ""),
                  (toquery =
                    "http://192.168.0.100:6080/arcgis/rest/services/rglw/MapServer/0");
              } else if (str[0] == "L" && str[1] == "L") {
                //  第一联围-勒流
                (toquery = ""),
                  (toquery =
                    "http://192.168.0.100:6080/arcgis/rest/services/dylw_ll/MapServer/0");
              } else if (str[0] == "L" && str[1] == "J") {
                //  第一联围-伦教
                (toquery = ""),
                  (toquery =
                    "http://192.168.0.100:6080/arcgis/rest/services/dylw_ld/MapServer/0");
              }
            }

            /***查询物探编号  D05213328 */
            let queryUrl = toquery;
            // create the Query object
            let queryObject = new Query();
            queryObject.where = `survey_no='${inputbianhao.value}'`;
            queryObject.outFields = ["*"];
            queryObject.returnGeometry = true;
            let searchPointSymbol = {
              type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
              style: "orbicular",
              color: "green",
              size: "10px", // pixels
              outline: {
                // autocasts as new SimpleLineSymbol()
                color: [255, 255, 0],
                width: 3, // points
              },
            };
            // call the executeQueryJSON() method
            query
              .executeQueryJSON(queryUrl, queryObject)
              .then(function (results) {
                //  console.log(results.features[0].geometry, "ssgggsgsgsgsgs");
                // results.graphics contains the graphics returned from query

                let resultGraphic = new Graphic({
                  // graphic with line geometry
                  geometry: results.features[0].geometry, // set geometry here
                  symbol: searchPointSymbol, // set symbol here
                });
                searchedGraphicLayer.graphics = [];
                searchedGraphicLayer.graphics.push(resultGraphic);
                console.log(searchedGraphicLayer.graphics);
                console.log(
                  results.features[0],
                  "console.log(results.graphics);"
                );
                pt.value = results.features[0];
                let ass = results.features[0].attributes;
                let opts = {
                  duration: 5000, // Duration of animation will be 5 seconds
                };
                // go to point at LOD 15 with custom duration
                /** 查询物探编号--定位 */
                view.goTo(
                  {
                    center: [
                      // longitude为null，报错
                      results.features[0].geometry.longitude,
                      results.features[0].geometry.latitude,
                    ],
                    zoom: 15,
                  },

                  opts
                );

                // 渲染弹出框数据
                for (let key in ass) {
                  //console.log(key, "ssgggsgsgsgsgs");
                  //console.log(ass[key]);
                  gridData.value.push({
                    date: key,
                    name: ass[key],
                  });
                }
                dialogTableVisible.value = true;
              });

            gridData.value = [];
          }
          // 如果下拉菜单的值为系统编号-------------------根据系统编号查
          if (xialacaidanchange.value == "1") {
            // 拿到输入值的每一个字母
            let str = inputbianhao.value;
            var toquery = "";
            for (let i in str) {
              //  console.log(str[0],str[i],'字符串的每一项');
              //  判断条件
              if (str[i] != /^.*[A-Z]+.*$/) {
                toquery =
                  "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/MapServer/0";
              }
            }
            let queryUrl = toquery;
            // create the Query object
            let queryObject = new Query();
            queryObject.where = `objectid='${inputbianhao.value}'`;
            queryObject.outFields = ["*"];
            queryObject.returnGeometry = true;
            let searchPointSymbol = {
              type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
              style: "orbicular",
              color: "green",
              size: "10px", // pixels
              outline: {
                // autocasts as new SimpleLineSymbol()
                color: [255, 255, 0],
                width: 3, // points
              },
            };
            // call the executeQueryJSON() method
            query
              .executeQueryJSON(queryUrl, queryObject)
              .then(function (results) {
                //  console.log(results.features[0].geometry, "ssgggsgsgsgsgs");
                // results.graphics contains the graphics returned from query

                let resultGraphic = new Graphic({
                  // graphic with line geometry
                  geometry: results.features[0].geometry, // set geometry here
                  symbol: searchPointSymbol, // set symbol here
                });
                searchedGraphicLayer.graphics = [];
                searchedGraphicLayer.graphics.push(resultGraphic);
                console.log(searchedGraphicLayer.graphics);
                console.log(
                  results.features[0],
                  "console.log(results.graphics);"
                );
                pt.value = results.features[0];
                let ass = results.features[0].attributes;
                let opts = {
                  duration: 5000, // Duration of animation will be 5 seconds
                };
                // go to point at LOD 15 with custom duration
                /** 查询物探编号--定位 */
                view.goTo(
                  {
                    center: [
                      // longitude为null，报错
                      results.features[0].geometry.longitude,
                      results.features[0].geometry.latitude,
                    ],
                    zoom: 15,
                  },

                  opts
                );

                // 渲染弹出框数据
                for (let key in ass) {
                  //console.log(key, "ssgggsgsgsgsgs");
                  //console.log(ass[key]);
                  gridData.value.push({
                    date: key,
                    name: ass[key],
                  });
                }
                // 开启弹出框
                dialogTableVisible.value = true;
              });

            gridData.value = [];
          }
        },

        false
      );
      //#endregion
      //#region 添加联围
      let qxlwl = new MapImageLayer({
        url: `${lianwei1}`,
      });
      let delw_bj = new MapImageLayer({
        url: `${lianwei2}`,
      });
      let delw_lc = new MapImageLayer({
        url: `${lianwei3}`,
      });
      let dylw_ld = new MapImageLayer({
        url: `${lianwei4}`,
      });
      let dylw_ll = new MapImageLayer({
        url: `${lianwei5}`,
      });
      let zslw = new MapImageLayer({
        url: `${lianwei6}`,
      });
      let qslw = new MapImageLayer({
        url: `${lianwei7}`,
      });
      let qlw = new MapImageLayer({
        url: `${lianwei8}`,
      });
      let dylw_dl = new MapImageLayer({
        url: `${lianwei9}`,
      });
      let nslaw = new MapImageLayer({
        url: `${lianwei10}`,
      });
      let rglw = new MapImageLayer({
        url: `${lianwei11}`,
      });
      // 图例 源
      let LegendYuan = new MapImageLayer({
        url: "http://192.168.0.100:6080/arcgis/rest/services/LegendYuan/MapServer",
      });
      // 图例 网
      let LegendWang = new MapImageLayer({
        url: "http://192.168.0.100:6080/arcgis/rest/services/LegendWang/MapServer",
      });
      // 图例 厂
      let LegendChang = new MapImageLayer({
        url: "http://192.168.0.100:6080/arcgis/rest/services/LegendChang/MapServer",
      });
      // 图例 河
      let LegendHe = new MapImageLayer({
        url: "http://192.168.0.100:6080/arcgis/rest/services/LegendHe/MapServer",
      });
      // 图例 城
      let LegendCheng = new MapImageLayer({
        url: "http://192.168.0.100:6080/arcgis/rest/services/LegendCheng/MapServer",
      });
      // 图例 问
      let LegendWen = new MapImageLayer({
        url: "http://192.168.0.100:6080/arcgis/rest/services/LegendWen/MapServer",
      });

      /** */
      // query featureLayer for cities with a population greater than one million people
      // require([
      //   "esri/rest/query"
      //   ], function(query) {
      //   // url to the layer of interest to query
      //   let queryUrl = "https//192.168.0.100:6080/arcgis/rest/services/sd_district/MapServer/2";

      //   query.executeQueryJSON(queryUrl, {  // autocasts as new Query()
      //      where: "1=1"
      //   }).then(function(results){
      //     // results is a FeatureSet containing an array of graphic features
      //     console.log(results.graphics,'==============================================');
      //   }, function(error){
      //        console.log(error); // will print error in console, if any
      //      });
      // });
      /*
      map.add(qxlwl);
      map.add(delw_bj);
      map.add(delw_lc);
      map.add(dylw_ld);
      map.add(dylw_ll);
      map.add(zslw);
      map.add(qslw);
      map.add(qlw);
      map.add(dylw_dl);
      map.add(nslaw);
      map.add(rglw);
      */
      //#endregion

      //#region 添加图例

      map.add(LegendYuan);
      map.add(LegendWang);
      map.add(LegendChang);
      map.add(LegendHe);
      map.add(LegendCheng);
      map.add(LegendWen);

      map.add(graphicsLayer);
      map.add(searchedGraphicLayer);
      // 图例 源
      var listbox = document.getElementById("listbox");
      const yuan = new Legend({
        view: view,
        container: listbox,
        layerInfos: [
          {
            layer: LegendYuan,
            title: "面源",
          },
        ],
      });
      //图例 网
      var mesh = document.getElementById("mesh");
      const wang = new Legend({
        view: view,
        container: mesh,
        layerInfos: [
          {
            layer: LegendWang,
            title: "网",
          },
        ],
      });
      //图例 厂
      var factory = document.getElementById("factory");
      const chang = new Legend({
        view: view,
        container: factory,
        layerInfos: [
          {
            layer: LegendChang,
            title: "厂",
          },
        ],
      });
      //图例 河
      var rivers = document.getElementById("rivers");
      const rive = new Legend({
        view: view,
        container: rivers,
        layerInfos: [
          {
            layer: LegendHe,
            title: "河",
          },
        ],
      });
      //图例 城
      var city = document.getElementById("city");
      const citys = new Legend({
        view: view,
        container: city,
        layerInfos: [
          {
            layer: LegendCheng,
            title: "城",
          },
        ],
      });
      //图例 问
      var askOne = document.getElementById("askOne");
      const ask = new Legend({
        view: view,
        container: askOne,
        layerInfos: [
          {
            layer: LegendWen,
            title: "问",
          },
        ],
      });
      //#endregion
      //#region 地图卡尺
      // 地图卡尺
      view.ui.components = [];
      view.ui.add("topbar", "top-right");
      view.ui.add("exportExcel", "top-right");

      document
        .getElementById("distanceButton")
        .addEventListener("click", function () {
          setActiveWidget(null);
          if (!this.classList.contains("active")) {
            setActiveWidget("distance");
          } else {
            setActiveButton(null);
          }
        });

      document
        .getElementById("areaButton")
        .addEventListener("click", function () {
          setActiveWidget(null);
          if (!this.classList.contains("active")) {
            setActiveWidget("area");
          } else {
            setActiveButton(null);
          }
        });
      function setActiveButton(selectedButton) {
        // focus the view to activate keyboard shortcuts for sketching
        view.focus();
        let elements = document.getElementsByClassName("active");
        for (let i = 0; i < elements.length; i++) {
          elements[i].classList.remove("active");
        }
        if (selectedButton) {
          selectedButton.classList.add("active");
        }
      }
      function setActiveWidget(type) {
        switch (type) {
          case "distance":
            activeWidget = new DistanceMeasurement2D({
              view: view,
            });
            // skip the initial 'new measurement' button
            activeWidget.viewModel.start();
            view.ui.add(activeWidget, "top-right");
            setActiveButton(document.getElementById("distanceButton"));
            break;
          case "area":
            activeWidget = new AreaMeasurement2D({
              view: view,
            });

            // skip the initial 'new measurement' button
            activeWidget.viewModel.start();

            view.ui.add(activeWidget, "top-right");
            setActiveButton(document.getElementById("areaButton"));
            break;
          case null:
            if (activeWidget) {
              view.ui.remove(activeWidget);
              activeWidget.destroy();
              activeWidget = null;
            }
            break;
        }
      }
      //#endregion
      //#region 新加编辑点线面
      /**
       *
       *
       */
      /**新加编辑点线面 */
      const blue = [162, 196, 94, 0.7];
      const white = [255, 255, 255, 0.8];

      // polygon symbol used for sketching the extruded building footprints

      let DrawPolygonsymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: [51, 51, 204, 0.6],
        style: "solid",
        outline: {
          // autocasts as new SimpleLineSymbol()
          color: "white",
          width: 1,
        },
      };

      // polyline symbol used for sketching routes
      const route = {
        type: "line",
        symbolLayers: [
          {
            type: "line",
            size: "10px",
            material: {
              color: white,
            },
          },
          {
            type: "line",
            size: "3px",
            material: {
              color: blue,
            },
          },
        ],
      };

      // point symbol used for sketching points of interest
      const point = {
        type: "point",
        symbolLayers: [
          {
            type: "icon",
            size: "30px",
            resource: { primitive: "kite" },
            outline: {
              color: blue,
              size: "3px",
            },
            material: {
              color: white,
            },
          },
        ],
      };

      // Set-up event handlers for buttons and click events
      const enabledcheckbox = document.getElementById("enabledcheckbox");
      const startbuttons = document.getElementById("startbuttons");
      const actionbuttons = document.getElementById("actionbuttons");
      const edgeoperationbuttons = document.getElementById(
        "edgeoperationbuttons"
      );
      const tooltipOptionsheckbox = document.getElementById(
        "tooltipOptionsheckbox"
      );
      const configurationInfoDiv = document.getElementById(
        "configurationInfoDiv"
      );
      const labelOptionscheckbox = document.getElementById(
        "labelOptionscheckbox"
      );
      const selfsnappingcheckbox = document.getElementById(
        "selfsnappingcheckbox"
      );
      const snappingctrlkey = document.getElementById("snappingctrlkey");
      const featuresnappingcheckbox = document.getElementById(
        "featuresnappingcheckbox"
      );

      // load the default value from the snapping checkbox
      let snappingcheckboxsavedstate = enabledcheckbox.checked ? true : false;
      const lineSymbol = {
        type: "simple-line", // autocasts as new SimpleLineSymbol()
        color: [226, 119, 40], // RGB color values as an array
        width: 4,
      };
      const fillSymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: [0, 255, 255, 0.433],

        outline: {
          // autocasts as new SimpleLineSymbol()
          color: "white",
          width: 1,
        },
      };
      // define the SketchViewModel and pass in the symbols for each geometry type
      // set the snappingOptions.selfEnabled to the default state
      const sketchViewModel = new SketchViewModel({
        layer: graphicsLayer,
        view: view,
        pointSymbol: point,
        polygonSymbol: DrawPolygonsymbol,
        polylineSymbol: lineSymbol,
        snappingOptions: {
          enabled: snappingcheckboxsavedstate,
          featureSources: [{ layer: graphicsLayer }],
        },
        tooltipOptions: { enabled: true },
        labelOptions: { enabled: true },
        defaultUpdateOptions: {
          tool: "reshape",
        },
      });
      var linetoclip;

      // after drawing the geometry, enter the update mode to update the geometry
      // and the deactivate the buttons   point
      sketchViewModel.on("create", (event) => {
        if (event.state === "complete") {
          startbuttons.style.display = "inline";
          actionbuttons.style.display = "none";
          /**线切割面 ↓ */
          if (event.graphic.geometry.type == "polyline") {
            linetoclip = event.graphic;
            console.log("-----------线");
            console.log(linetoclip);
            var polyline = new Polyline();
            polyline.geometry = event.graphic;
            linetoclip = polyline;
          } else if (event.graphic.geometry.type == "polygon") {
            console.log("-----------面");

            regionToExportCAD = event.graphic.geometry;
            const graphicA = new Graphic({
              geometry: event.graphic.geometry,
              symbol: fillSymbol,
            });
            // 将切割后的加入数组
            graphicsLayer.graphics.push(graphicA);
            // console.log(graphicsLayer.graphics, "shuzu");
          }
          /**线切割面 ↑ */
        }
        if (event.state === "cancel") {
          startbuttons.style.display = "inline";
          actionbuttons.style.display = "none";
          graphicsLayer.graphics = [];
        }
      });

      sketchViewModel.on("update", (event) => {
        if (event.state === "start") {
          startbuttons.style.display = "none";
          actionbuttons.style.display = "inline";
          if (
            event.graphics[0].geometry.type === "polygon" ||
            event.graphics[0].geometry.type === "polyline"
          ) {
            edgeoperationbuttons.style.display = "inline";
          }
        }
        if (event.state === "complete") {
          startbuttons.style.display = "inline";
          actionbuttons.style.display = "none";
          edgeoperationbuttons.style.display = "none";
        }
      });

      /**********************************************
       * Drawing UI with configuration
       *********************************************/

      const drawButtons = Array.prototype.slice.call(
        document.getElementsByClassName("starttool")
      );
      const cancelBtn = document.getElementById("cancel");
      const doneBtn = document.getElementById("done");

      // set event listeners to activate sketching graphics
      drawButtons.forEach((btn) => {
        btn.addEventListener("click", (event) => {
          // to activate sketching the create method is called passing in the geometry type
          // from the data-type attribute of the html element
          sketchViewModel.create(event.target.getAttribute("data-type"));
          startbuttons.style.display = "none";
          actionbuttons.style.display = "inline";
        });
      });

      cancelBtn.addEventListener("click", (event) => {
        sketchViewModel.cancel();
      });
      doneBtn.addEventListener("click", (event) => {
        if (sketchViewModel.updateGraphics.length !== 0) {
          sketchViewModel.complete();
        } else {
          sketchViewModel.cancel();
        }
      });

      view.ui.add("sketchPanel", "top-right");

      // default values for edge/move operations
      let edgeType = "split";
      let shapeType = "move";

      // Handling the configuration for edge operation
      const noneEdgeBtn = document.getElementById("none-edge-button");
      const splitEdgeBtn = document.getElementById("split-edge-button");
      const offsetEdgeBtn = document.getElementById("offset-edge-button");
      noneEdgeBtn.onclick = edgeChangedClickHandler;
      splitEdgeBtn.onclick = edgeChangedClickHandler;
      offsetEdgeBtn.onclick = edgeChangedClickHandler;

      function edgeChangedClickHandler(event) {
        edgeType = event.target.value;

        // handle the buttons
        const buttons = document.getElementsByClassName("edge-button");
        for (const button of buttons) {
          button.classList.remove("edge-button-selected");
        }
        this.classList.add("edge-button-selected");
        restartUpdateMode({
          reshapeOptions: {
            edgeOperation: edgeType,
            shapeOperation: shapeType,
          },
        });
      }

      // Handling the configuration for move operation
      const noneShapeButton = document.getElementById("none-shape-button");
      const moveShapeButton = document.getElementById("move-shape-button");
      noneShapeButton.onclick = shapeChangedClickHandler;
      moveShapeButton.onclick = shapeChangedClickHandler;

      function shapeChangedClickHandler(event) {
        shapeType = event.target.value;

        // handle the buttons
        const buttons = document.getElementsByClassName("shape-button");
        for (const button of buttons) {
          button.classList.remove("shape-button-selected");
        }
        this.classList.add("shape-button-selected");
        restartUpdateMode({
          reshapeOptions: {
            edgeOperation: edgeType,
            shapeOperation: shapeType,
          },
        });
      }

      function restartUpdateMode(updateOptions) {
        sketchViewModel.defaultUpdateOptions = {
          ...sketchViewModel.defaultUpdateOptions,
          ...updateOptions,
        };

        if (sketchViewModel.activeTool) {
          if (
            sketchViewModel.activeTool === "transform" ||
            sketchViewModel.activeTool === "move" ||
            sketchViewModel.activeTool === "reshape"
          ) {
            updateOptions.tool = sketchViewModel.activeTool;
            sketchViewModel.update(
              sketchViewModel.updateGraphics.toArray(),
              updateOptions
            );
          }
        }
      }

      /**********************************************
       * Configuration UI for snapping
       *********************************************/

      reactiveUtils.watch(
        () => sketchViewModel.snappingOptions.enabled,
        (snappingEnabled) => {
          enabledcheckbox.checked = snappingEnabled;
        }
      );

      enabledcheckbox.checked = sketchViewModel.snappingOptions.enabled;
      enabledcheckbox.addEventListener("change", (event) => {
        sketchViewModel.snappingOptions.enabled = event.target.checked
          ? true
          : false;
      });

      tooltipOptionsheckbox.checked = sketchViewModel.tooltipOptions.enabled;
      tooltipOptionsheckbox.addEventListener("change", (event) => {
        sketchViewModel.tooltipOptions.enabled = event.target.checked
          ? true
          : false;
      });

      labelOptionscheckbox.checked = sketchViewModel.labelOptions.enabled;
      labelOptionscheckbox.addEventListener("change", (event) => {
        sketchViewModel.labelOptions.enabled = event.target.checked
          ? true
          : false;
      });

      selfsnappingcheckbox.checked =
        sketchViewModel.snappingOptions.selfEnabled;
      selfsnappingcheckbox.addEventListener("change", (event) => {
        sketchViewModel.snappingOptions.selfEnabled = event.target.checked
          ? true
          : false;
      });

      featuresnappingcheckbox.checked =
        sketchViewModel.snappingOptions.featureEnabled;
      featuresnappingcheckbox.addEventListener("change", (event) => {
        sketchViewModel.snappingOptions.featureEnabled = event.target.checked
          ? true
          : false;
      });

      const configurationExpand = new Expand({
        expandIcon: "gear",
        expandTooltip: "Show configuration",
        expanded: false,
        view: view,
        content: document.getElementById("configurationDiv"),
      });

      // observe the if the CTRL-key got pressed to give the user a visual feedback
      // the logic itself for toggling snapping is in the SketchViewModel
      view.on(["key-down"], (ev) => {
        if (ev.key === "Control") {
          snappingctrlkey.style.fontWeight = "bold";
          snappingctrlkey.style.color = "royalblue";
        }
      });
      view.on(["key-up"], (ev) => {
        if (ev.key === "Control") {
          snappingctrlkey.style.fontWeight = "normal";
          snappingctrlkey.style.color = "black";
        }
      });

      view.ui.add(configurationExpand, "bottom-right");

      configurationInfoDiv.addEventListener("click", (event) => {
        configurationExpand.expand();
      });
      let isFirst = false;
      view.ui.add("configurationInfoDiv", "bottom-right");
      /**新加编辑点线面*/
      //#endregion
      /**--------------------------地图点击效果----------------------------------------------------- */
      let params;
      let datalinearr = ref([]);
      let guangjingwutan = ref([]);
      let suyuanwutan = ref([]);
      let suyuanobjectid = ref("");
      let suyuanobjectidup = ref("");
      let guanluxunjingObjectid = ref("");
      let separator = ","; //字符串分隔符
      watch(pictruePath, (newval, oldval) => {
        // console.log(newval.propsObject,'hahha');
        if (newval.propsList.length) {
          // console.log(newval.propsList[0].url, '照片地址');
          newUploadPhotoPath.value = newval.propsList;
          console.log(newUploadPhotoPath.value[0].url, "照片地址");
        }
        // 成果导出
        if (newval.propsChengguoDaoChu == true) {
          flag = 6;
        } else {
          flag = 0;
        }
        newSubmit.value = newval.propsSubmit;
        //  gis质量提升打开时
        if (newval.propsSubmit == true) {
          flag = 5;
        }
        // 成果导出
        if (flag == 6) {
          sketchViewModel.create("polygon");
          const exportExcel = document.getElementById("exportExcel");
          exportExcel.style.display = "inline";
        }

        // gis质量提升问题添加提交
        if (newval.propsSure == true) {
          // console.log("提交按钮为true时让flag=7");
          const defectFeatureLayer = new FeatureLayer({
            url: "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/FeatureServer/3",
            outFields: ["*"],
            id: "defectFeatureLayer",
          });
          // pointTobeAdd.z = undefined;
          // pointTobeAdd.hasZ = false;
          // console.log(pointTobeAdd.hasZ, "editFeature");
          var editFeature = new Graphic({
            geometry: pointTobeAdd,
            attributes: {
              evcode_main: "12345604",
              zone_code: "dq",
              remark1: "A01",
              remark2: "0",   /** 0是待查收，1是执行整改，2是待核查，3是核查完成 */
              // 上报照片
              uploadpath1: newUploadPhotoPath.value[0].url,
              uploadpath2: newUploadPhotoPath.value[1].url,
              uploadpath3: newUploadPhotoPath.value[2].url,
              // 上报其他材料
              uploadpath4: "",
            },
          });
          // console.log(newUploadPhotoPath.value[0].url,'jjjjjjjj');
          const edits = {
            addFeatures: [editFeature],
          };
          defectFeatureLayer
            .applyEdits(edits)
            .then((editsResult) => {
              if (
                editsResult.addFeatureResults.length > 0 ||
                editsResult.updateFeatureResults.length > 0
              ) {
                console.log("添加问题成功");
                ElMessage({
                  message: "添加成功",
                  type: "success",
                });
              }
              // show FeatureTemplates if user deleted a feature
              else if (editsResult.deleteFeatureResults.length > 0) {
                toggleEditingDivs("block", "none");
              }
            })
            .catch((error) => {
              console.log("error = ", error);
              ElMessage.error("添加失败，请检查填入的信息是否正确");
            });
          /**====================================== */
        }

        // ========================点击查收时触发的操作============================
        if (newval.propsTreatCheck == true) {
          console.log(newval.propsObject, "hahha");
          // let queryUrldis =
          //   "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/FeatureServer/3";
          const defectFeatureLayer = new FeatureLayer({
            url: "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/FeatureServer/3",
            outFields: ["*"],
            id: "defectFeatureLayer",
          });
          /**---------------------下面是查到符合条件的数据传给父组件进行展示--------------------------------------- */
          defectFeatureLayer
            .queryFeatures({
              where: "remark2 ='0'",
              returnGeometry: true,
              outFields: ["*"],
            })
            .then(function (results) {
              // console.log(results.features, '待查收数据');
              results.features.forEach((element) => {
                // console.log(element.attributes.evcode_main,'新添加');
                if (element.attributes.remark2 == "0") {
                  //  console.log("状态为0", element.attributes);
                  daiChaShou.value.push(element.attributes);
                }
              });
              console.log(daiChaShou.value, '---------------------------');
              // 将查到的值传给父组件
              EventBus.emit("daiChaShou.value", daiChaShou.value);
              daiChaShou.value = []
            });
          /**--------待查收---------下面是更改remark2的操作------------------------ */
          let allObjectid = ref("");
          // 通过for循环把拿到的objectid数组赋值给字符串
          for (let index = 0; index < newval.propsObject.length; index++) {
            allObjectid.value += newval.propsObject[index];
            if (index !== newval.propsObject.length - 1) {
              allObjectid.value += ",";
            }
          }
          /**-----根据objectid查询所有的remark2--- */
          defectFeatureLayer
            .queryFeatures({
              where: `objectid in (${allObjectid.value})`,
              returnGeometry: true,
              outFields: ["*"],
            })
            .then(function (results) {
              console.log(results.features, "查到的objectid");
              results.features.forEach((element) => {
                console.log(results.features);
                element.attributes["remark2"] = "1";
                const edits = {
                  updateFeatures: [element],
                };
                defectFeatureLayer
                  .applyEdits(edits)
                  .then((editsResult) => {
                    console.log(editsResult);
                    if (
                      editsResult.addFeatureResults.length > 0 ||
                      editsResult.updateFeatureResults.length > 0
                    ) {
                      console.log("更新问题成功");
                    }
                    // show FeatureTemplates if user deleted a feature
                    else if (editsResult.deleteFeatureResults.length > 0) {
                      toggleEditingDivs("block", "none");
                    }
                  })
                  .catch((error) => {
                    console.log("error = ", error);
                    ElMessage({
                      message: "提交失败",
                      type: "success",
                    });
                  });
              });
            });
        }
        // ========================点击整改时触发的操作============================
        if (newval.propsCorrective == true) {
          const defectFeatureLayer = new FeatureLayer({
            url: "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/FeatureServer/3",
            outFields: ["*"],
            id: "defectFeatureLayer",
          });
          /**---------------------下面是查到符合条件的数据传给父组件进行展示--------------------------------------- */
          defectFeatureLayer
            .queryFeatures({
              where: "remark2 ='1'",
              returnGeometry: true,
              outFields: ["*"],
            })
            .then(function (results) {
              console.log(results.features, '待整改数据');
              results.features.forEach((element) => {
                // console.log(element.attributes.evcode_main,'新添加');
                if (element.attributes.remark2 == "1") {
                  //  console.log("状态为0", element.attributes);
                  zhixingzhenggai.value.push(element.attributes);
                }
              });
              // 将查到的值传给父组件
              EventBus.emit("zhixingzhenggai.value", zhixingzhenggai.value);
              zhixingzhenggai.value=[]
            });
          /**------执行整改-----------下面是更改remark2的操作------------------------ */
          let allObjectid = ref("");
          // 通过for循环把拿到的objectid数组赋值给字符串
          for (let index = 0; index < newval.propsObject.length; index++) {
            allObjectid.value += newval.propsObject[index];
            if (index !== newval.propsObject.length - 1) {
              allObjectid.value += ",";
            }
          }
          /**-----根据objectid查询所有的remark2--- */
          defectFeatureLayer
            .queryFeatures({
              where: `objectid in (${allObjectid.value})`,
              returnGeometry: true,
              outFields: ["*"],
            })
            .then(function (results) {
              // console.log(results.features, "查到的objectid");
              results.features.forEach((element) => {
                // console.log(results.features);
                element.attributes["remark2"] = "2";
                const edits = {
                  updateFeatures: [element],
                };
                defectFeatureLayer
                  .applyEdits(edits)
                  .then((editsResult) => {
                    console.log(editsResult);
                    if (
                      editsResult.addFeatureResults.length > 0 ||
                      editsResult.updateFeatureResults.length > 0
                    ) {
                      console.log("整改问题成功");
                    }
                    // show FeatureTemplates if user deleted a feature
                    else if (editsResult.deleteFeatureResults.length > 0) {
                      toggleEditingDivs("block", "none");
                    }
                  })
                  .catch((error) => {
                    console.log("error = ", error);
                    ElMessage({
                      message: "整改失败",
                      type: "success",
                    });
                  });
              });
            });
        }
        // ========================点击核查时触发的操作============================
        if (newval.propsVerifiable == true) {
          const defectFeatureLayer = new FeatureLayer({
            url: "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/FeatureServer/3",
            outFields: ["*"],
            id: "defectFeatureLayer",
          });
          /**---------------------下面是查到符合条件的数据传给父组件进行展示--------------------------------------- */
          defectFeatureLayer
            .queryFeatures({
              where: "remark2 ='2'",
              returnGeometry: true,
              outFields: ["*"],
            })
            .then(function (results) {
              console.log(results.features, '待核查数据');
              results.features.forEach((element) => {
                // console.log(element.attributes.evcode_main,'新添加');
                if (element.attributes.remark2 == "2") {
                  //  console.log("状态为0", element.attributes);
                  daiHeCha.value.push(element.attributes);
                }
              });
              // 将查到的值传给父组件
              EventBus.emit("daiHeCha.value", daiHeCha.value);
              daiHeCha.value=[]
            });
          /**------执行整改-----------下面是更改remark2的操作------------------------ */
          let allObjectid = ref("");
          // 通过for循环把拿到的objectid数组赋值给字符串
          for (let index = 0; index < newval.propsObject.length; index++) {
            allObjectid.value += newval.propsObject[index];
            if (index !== newval.propsObject.length - 1) {
              allObjectid.value += ",";
            }
          }
          /**-----根据objectid查询所有的remark2--- */
          defectFeatureLayer
            .queryFeatures({
              where: `objectid in (${allObjectid.value})`,
              returnGeometry: true,
              outFields: ["*"],
            })
            .then(function (results) {
              // console.log(results.features, "查到的objectid");
              results.features.forEach((element) => {
                // console.log(results.features);
                element.attributes["remark2"] = "3";
                const edits = {
                  updateFeatures: [element],
                };
                defectFeatureLayer
                  .applyEdits(edits)
                  .then((editsResult) => {
                    console.log(editsResult);
                    if (
                      editsResult.addFeatureResults.length > 0 ||
                      editsResult.updateFeatureResults.length > 0
                    ) {
                      console.log("核查问题成功");
                    }
                    // show FeatureTemplates if user deleted a feature
                    else if (editsResult.deleteFeatureResults.length > 0) {
                      toggleEditingDivs("block", "none");
                    }
                  })
                  .catch((error) => {
                    console.log("error = ", error);
                    ElMessage({
                      message: "核查失败",
                      type: "success",
                    });
                  });
              });
            });
        }
        // ========================点击核查完成触发的操作  ↓  ↓  ↓  ↓============================
        if (newval.propsCheckFinish == true) {
          const defectFeatureLayer = new FeatureLayer({
            url: "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/FeatureServer/3",
            outFields: ["*"],
            id: "defectFeatureLayer",
          });
          /**---------------------下面是查到符合条件的数据传给父组件进行展示--------------------------------------- */
          defectFeatureLayer
            .queryFeatures({
              where: "remark2 ='3'",
              returnGeometry: true,
              outFields: ["*"],
            })
            .then(function (results) {
              // console.log(results.features, '核查完成数据');
              results.features.forEach((element) => {
                // console.log(element.attributes.evcode_main,'新添加');
                if (element.attributes.remark2 == "3") {
                  //  console.log("状态为0", element.attributes);
                  wanChengHeCha.value.push(element.attributes);
                }
              });
              // 将查到的值传给父组件
              EventBus.emit("wanChengHeCha.value", wanChengHeCha.value);
              wanChengHeCha.value=[]
            });
          /**------执行整改-----------下面是更改remark2的操作------------------------ */
          let allObjectid = ref("");
          // 通过for循环把拿到的objectid数组赋值给字符串
          for (let index = 0; index < newval.propsObject.length; index++) {
            allObjectid.value += newval.propsObject[index];
            if (index !== newval.propsObject.length - 1) {
              allObjectid.value += ",";
            }
          }
          /**-----根据objectid查询所有的remark2--- */
          defectFeatureLayer
            .queryFeatures({
              where: `objectid in (${allObjectid.value})`,
              returnGeometry: true,
              outFields: ["*"],
              
            })
            .then(function (results) {
              // console.log(results.features, "查到的objectid");
              results.features.forEach((element) => {
                // console.log(results.features);
                element.attributes["remark2"] = "4";
                const edits = {
                  updateFeatures: [element],
                };
                defectFeatureLayer
                  .applyEdits(edits)
                  .then((editsResult) => {
                    console.log(editsResult);
                    if (
                      editsResult.addFeatureResults.length > 0 ||
                      editsResult.updateFeatureResults.length > 0
                    ) {
                      console.log("完成核查");
                    }
                    // show FeatureTemplates if user deleted a feature
                    else if (editsResult.deleteFeatureResults.length > 0) {
                      toggleEditingDivs("block", "none");
                    }
                  })
                  .catch((error) => {
                    console.log("error = ", error);
                    ElMessage({
                      message: "核查失败",
                      type: "success",
                    });
                  });
              });
            });
        }
      });
      /**===================================================================================================== */


      document
        .getElementById("deleteMapping")
        .addEventListener("click", function () {
          // 清空添加的线
          view.graphics = [];
          polylineGraphicLayer.graphics = [];
        });
      // 地图的点击方法
      view.when(function () {
        //dylw_dlLayer.findSublayerById(0).definitionExpression = "pointtype in ('井','箅子','排')"
        // executeIdentify() is called each time the view is clicked
        view.on("click", executeIdentify);
        params = new IdentifyParameters();
        params.tolerance = 30;
        params.layerIds = [0, 1];
        params.layerOption = "top";
        params.width = view.width;
        params.height = view.height;
        params.returnGeometry = true;
      });
      var hengduanmianLastPoint = [];
      var guanluxunjingLastPoint = [];
      //  地图的点击方法调用的函数
      async function executeIdentify(event) {
        console.log("-----------------------------");
        eventlist.value = event;
        params.geometry = event.mapPoint;
        params.mapExtent = view.extent;
        // 当flag等于1时执行查询代码
        // 点击清除按钮清空渲染的点线

        if (flag == 1) {
          // 清空添加的线
          view.graphics = [];
          polylineGraphicLayer.graphics = [];
          identify.identify(dylw_dlURL, params).then(function (response) {
            if (response.results.length == "0") {
              ElMessage.error("未查询到相关点信息");
            } else if (response.results.length > "0") {
              console.log(response.results, "查询");
              // 把查出来的值赋给变量渲染页面
              response.results.forEach((item) => {
                console.log(item, "chaxun");
                if (item.layerId == 0) {
                  jiedianFalse.value = true;
                  guanxianFalse.value = false;
                  chaxunTabStr.value = item.feature.attributes;
                  jiedianwutan.value = item.feature.attributes.survey_no;
                  // 查询的代码页面展示
                  // 节点
                  chaxunTabDataPoint.value = [];
                  // 用 Object.values方法获得对象值组成的数组
                  console.log(chaxunTabStr.value, "chaxunTabStr.value");
                  arrjiedian.value = [];
                  for (const key in chaxunTabStr.value) {
                    if (
                      key == "survey_no" ||
                      key == "subtype" ||
                      key == "pointdepth" ||
                      key == "pointvisible" ||
                      key == "pointposition" ||
                      key == "pointprop" ||
                      key == "path1" ||
                      key == "path2" ||
                      key == "path3" ||
                      key == "uploader" ||
                      key == "uploadtime" ||
                      key == "zone_name" ||
                      key == "coor_record"
                    ) {
                      arrjiedian.value.push(chaxunTabStr.value[key]);
                    }
                  }
                  arrjiedian.value.map((v, i) => {
                    let objjiedian = {};
                    objjiedian.name = v;
                    objjiedian.values = chaxunJiedian[i]; //汉字组成的数组
                    // console.log(v,'--ss0ss--',objjiedian.values);
                    if (objjiedian.values != null && objjiedian.values != "") {
                      chaxunTabDataPoint.value.push(objjiedian);
                    }
                  });
                  let graphic = new Graphic();
                  const sms = {
                    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                    // autocasts as new SimpleLineSymbol()
                    color: [255, 255, 0],
                    width: 10,
                  };
                  graphic.geometry = item.feature.geometry;
                  graphic.symbol = sms;
                  view.graphics.add(graphic);
                } else if (item.layerId == 1) {
                  jiedianFalse.value = false;
                  guanxianFalse.value = true;
                  chaxunTabStr.value = "";
                  chaxunTabStrLine.value = item.feature.attributes;
                  console.log(chaxunTabStrLine.value, "chaxunTabStrLine.value");
                  // 页面展示的值赋值
                  guanxianTOsurvey.value = item.feature.attributes.tosurveyno;
                  guanxianFromsurvey.value =
                    item.feature.attributes.fromsurveyno;
                  guanxianTOId.value = item.feature.attributes.toid;
                  guanxianFromId.value = item.feature.attributes.fromid;
                  guanxianToCode.value = item.feature.attributes.to_code;
                  guanxianFromCode.value = item.feature.attributes.to_code;
                  jiedianwutan.value = item.feature.attributes.tosurveyno;
                  // 管线
                  arrguanxian.value = [];
                  // 循环筛选数据
                  for (const key in chaxunTabStrLine.value) {
                    if (
                      key == "fromsurveyno" ||
                      key == "tosurveyno" ||
                      key == "subtype" ||
                      key == "burytype" ||
                      key == "fromele" ||
                      key == "toele" ||
                      key == "linktype" ||
                      key == "path1" ||
                      key == "path2" ||
                      key == "path3" ||
                      key == "uploader" ||
                      key == "uploadtime" ||
                      key == "zone_name"
                    ) {
                      arrguanxian.value.push(chaxunTabStrLine.value[key]);
                    }
                  }
                  // 用 Object.values方法获得对象值组成的数组
                  //  arrguanxian.value  = Object.values(chaxunTabStrLine.value);
                  console.log(arrguanxian.value, "lllllllssssssssss");
                  arrguanxian.value.map((v, i) => {
                    let objguanxian = {};
                    objguanxian.name = v;
                    objguanxian.values = chaxunGuanxian[i]; //汉字组成的数组
                    if (
                      objguanxian.values != null &&
                      objguanxian.values != ""
                    ) {
                      // 把拼好的值加到chaxunTabDataLine数组中
                      chaxunTabDataLine.value.push(objguanxian);
                    }
                  });
                }
              });

              //  渲染线段
              const lineSymbol1 = {
                //线的样式
                type: "simple-line", // autocasts as new SimpleLineSymbol()
                color: "#FFC900", // RGB color values as an array
                width: 4,
              };
              const polylineGraphic = new Graphic({
                geometry: response.results[0].feature.geometry, // Add the geometry created in step 3
                symbol: lineSymbol1, // Add the symbol created in step 4
              });
              view.graphics.add(polylineGraphic);

              let chaxunPoint = event.mapPoint;
              Xcoordinate.value = chaxunPoint.x;
              //  保留小数点后四位
              Xcoordinate.value = String(Xcoordinate.value).replace(
                /^(.*\..{2}).*$/,
                "$1"
              );
              Ycoordinate.value = chaxunPoint.y;
              //  保留小数点后四位
              Ycoordinate.value = String(Ycoordinate.value).replace(
                /^(.*\..{2}).*$/,
                "$1"
              );
              fenquCode.value =
                response.results[0].feature.attributes.zone_code;
              fenquName.value =
                response.results[0].feature.attributes.zone_name;

              inquiremenu.value = true;
            }
          });
        }

        // 当flag=2时执行管路寻径代码
        else if (flag == 2) {
          if (isFirst == false) {
            console.log("lizf-----------");
            view.graphics = [];
            isFirst = true;
          } else {
            isFirst = false;
            console.log("lizf++++++++++++++++++");
          }
          // 清空添加的线
          identify.identify(dylw_dlURL, params).then(function (response) {
            if (response.results.length == "0") {
              ElMessage.error("请点击正确的管点");
            } else if (response.results.length > "0") {
              guanluxunjingLastPoint = [];
              let xunjingPoint = event.mapPoint;
              guanluxunjingLastPoint.push(xunjingPoint);
              console.log(guanluxunjingLastPoint, "guanluxunjingLastPoint");
              // 点击地图两个点的样式
              const markerSymbolxunjing = {
                type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                // autocasts as new SimpleLineSymbol()
                color: "#FFC900",
                width: 2,
              };
              const pointGraphic = new Graphic({
                geometry: xunjingPoint,
                symbol: markerSymbolxunjing,
              });
              view.graphics.add(pointGraphic);
              /**========================================================================= */
              /**========================================================================== */
              // 如果geometry的type属性为point的话就拿去这个点的物探编号
              if (response.results[0].feature.geometry.type == "point") {
                console.log(
                  response.results[0].feature.attributes.survey_no,
                  "管路寻径的值"
                );

                guangjingwutan.value.push(
                  response.results[0].feature.attributes.survey_no
                );
                console.log(guangjingwutan.value, "所有");
                if (guangjingwutan.value.length == 1) {
                  ElMessage({
                    message: "请再输入一个点",
                    type: "warning",
                  });
                } else if (guangjingwutan.value.length == 2) {
                  console.log(guangjingwutan.value[0], "物探编号");
                  // 向后端传递点击点的物探编号
                  wutancan.fromsurveyno = guangjingwutan.value[0];
                  wutancan.tosurveyno = guangjingwutan.value[1];
                  // 发送管路寻径弹出框数据的请求
                  console.log(wutancan, "wutancan");
                  routing(wutancan).then((res) => {
                    let guanluxuanran = res.data;
                    // 拿到点的objectid用来查询所有的线
                    console.log(res, "resssss");
                    if (res.data.length == 0) {
                      ElMessage({
                        message: "所选两个井点之间不存在通路",
                        type: "warning",
                      });
                    }
                    // 拿到所有的objectid
                    guanluxunjingObjectid.value = "";
                    res.data.forEach((element) => {
                      guanluxunjingObjectid.value +=
                        element.objectid + separator;
                    });
                    newGuanluxunjingObjectid.value =
                      guanluxunjingObjectid.value.substring(
                        0,
                        guanluxunjingObjectid.value.length - 1
                      );
                    // console.log(newGuanluxunjingObjectid, 'ssssffff');
                    /**根据objectid查出线----------------------------------------------------------------------------------- */
                    let guanLuXunJingObjectid = new Query();
                    guanLuXunJingObjectid.where = `objectid in (${newGuanluxunjingObjectid.value})`;
                    guanLuXunJingObjectid.outFields = ["*"];
                    guanLuXunJingObjectid.returnGeometry = true;
                    // 定义样式
                    let polylineSymbol = {
                      type: "simple-line", // autocasts as new SimpleMarkerSymbol()
                      color: "#00A0FF",
                      width: 5, //pixels
                      outline: {
                        // autocasts as new SimpleLineSymbol()
                        color: "white",
                        width: 1,
                      },
                    };
                    console.log(
                      guanLuXunJingObjectid.where,
                      "打印拼接出来的语句"
                    );
                    query
                      .executeQueryJSON(
                        "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/MapServer/1",
                        guanLuXunJingObjectid
                      )
                      .then(function (results) {
                        console.log(
                          results,
                          "查询-----------------------------"
                        );
                        // 渲染
                        polylineGraphicLayer.graphics = [];
                        results.features.forEach((item) => {
                          let resultGraphicpolyline = new Graphic({
                            geometry: item.geometry, // set geometry here
                            symbol: polylineSymbol, // set symbol here
                          });
                          polylineGraphicLayer.graphics.push(
                            resultGraphicpolyline
                          );
                        });
                      });
                    /**根据objectid查出线 ----------------------------------------------------------------------------------------------------*/

                    // 渲染弹出框表格数据处理
                    if (!guanluxuanran || !guanluxuanran.length) return [];
                    let typeList = ["管道编号"];
                    let testNameList = ["管直径"];
                    let percentList = ["井编号"];
                    let criterionList = ["物探编号"];
                    let ruleList = ["井尺寸"];
                    let formulaList = ["地表标高"];
                    let explanationList = ["井底标高"];
                    let explnationShui = ["井底水深"];
                    let explnationNi = ["井底泥深"];
                    guanluxuanran.forEach((item) => {
                      typeList.push(item.objectid);
                      testNameList.push(item.gzj);
                      percentList.push(item.jbh);
                      criterionList.push(item.tosurveyno);
                      ruleList.push(item.jcc);
                      formulaList.push(item.dbbg);
                      explanationList.push(item.jdbg);
                      explnationShui.push(item.sh);
                      explnationNi.push(item.ns);
                    });
                    from.jdbgprops = explanationList;
                    from.dbbgprops = formulaList;
                    tableData.value = [
                      typeList,
                      testNameList,
                      percentList,
                      criterionList,
                      ruleList,
                      formulaList,
                      explanationList,
                      explnationShui,
                      explnationNi,
                    ];
                    /**管路寻径echarts图数据 */
                    arrjdbglist.value = from.jdbgprops.slice(1);
                    arrdbbglist.value = from.dbbgprops.slice(1);
                    resultb.value = arrdbbglist.value.map(
                      (element, index) => element - arrjdbglist.value[index]
                    );
                    resultarr.value = resultb.value.map(
                      (element, index) => element + arrdbbglist.value[index]
                    );
                    // console.log(from.jdbgprops, "tableData.value");
                    menutool.value = true;
                    //  延迟加载echarts图
                    nextTick(() => {
                      gunluxunjingecharts();
                    });
                    guangjingwutan.value = [];
                    xunjingPath = [];
                    /** */
                  });
                  guangjingwutan.value = [];
                }
                polylineGraphicLayer.graphics = [];
              }
            }
          });
        }
        // 当flag=3时执行横截面代码
        else if (flag == 3) {
          if (hengduanmianLastPoint.length == 2) {
            polylineGraphicLayer.graphics = [];
            hengduanmianLastPoint = [];
            view.graphics = [];
            arrhengduanmianlist.value = [];
          }
          // 拿到地图点的坐标
          let duanmianPoint = event.mapPoint;
          console.log(duanmianPoint.x);
          console.log(duanmianPoint.y);
          hengduanmianLastPoint.push(duanmianPoint);
          // console.log(hengduanmianLastPoint,'hengduanmianLastPoint');
          // 点击地图两个点的样式
          const markerSymbol = {
            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
            color: "#757575",
            width: 2,
            outline: {
              // autocasts as new SimpleLineSymbol()
              color: [255, 255, 255],
              width: 1, // points
            },
          };
          // 相交点的样式
          const markerSymbol2 = {
            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()

            // autocasts as new SimpleLineSymbol()
            color: "#00619B",
            width: 3,
            outline: {
              // autocasts as new SimpleLineSymbol()
              color: [255, 255, 255],
              width: 1, // points
            },
          };

          const pointGraphic = new Graphic({
            geometry: duanmianPoint,
            symbol: markerSymbol,
          });
          view.graphics.add(pointGraphic);
          if (hengduanmianLastPoint.length == 0) {
          } else if (hengduanmianLastPoint.length == 1) {
          }
          // 当点击两个点执行的代码
          else if (hengduanmianLastPoint.length == 2) {
            // 第一个点
            let startPoint = [
              hengduanmianLastPoint[0].longitude,
              hengduanmianLastPoint[0].latitude,
            ];
            // 第二个点
            let endPoint = [
              hengduanmianLastPoint[1].longitude,
              hengduanmianLastPoint[1].latitude,
            ];
            let paths = [startPoint, endPoint];
            let line = new Polyline({
              hasZ: false,
              hasM: false,
              paths: paths,
              spatialReference: { wkid: 4490 },
            });
            //lineSymbol是线符号——————————用于显示用户绘制的线
            const lineSymbol = {
              type: "simple-line", // autocasts as new SimpleLineSymbol()
              color: "#FFC900", // RGB color values as an array
              width: 3,
            };
            const polylineGraphic = new Graphic({
              geometry: line, // Add the geometry created in step 3
              symbol: lineSymbol, // Add the symbol created in step 4
            });
            view.graphics.add(polylineGraphic);
            let queryUrl =
              "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/MapServer/1";
            let queryObject = new Query();
            queryObject.where = "1=1";
            queryObject.returnGeometry = true;
            queryObject.outFields = ["*"];
            queryObject.spatialRelationship = "intersects";
            queryObject.geometry = line; //这里传入用户绘制的线

            let results = await query.executeQueryJSON(queryUrl, queryObject);
            const lineSymbol2 = {
              type: "simple-line", // autocasts as new SimpleLineSymbol()
              color: "#404040", // RGB color values as an array
              width: 4,
            };
            //#region lizf添加
            const url =
              "//elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer/";

            //  "http://192.168.0.100:6080/arcgis/rest/services/sddem/ImageServer"
            const demlayer = new ElevationLayer(url);
            /**根据交点的物探编号查询线的两个点的z值 */
            let surveyNoarr = ref([]);
            let surveyNoarrtwo = ref([]);
            //  把每一项值加进数组中
            results.features.forEach((element) => {
              // console.log(element.attributes,'循环后的值');
              surveyNoarr.value.push(`${element.attributes.fromsurveyno}`);
              surveyNoarrtwo.value.push(`${element.attributes.tosurveyno}`);
            });

            var points = [];

            //#endregion
            //将每一个与用户绘制的都展示在地图上
            for (var i = 0; i < results.features.length; i++) {
              const resultGraphic = new Graphic({
                geometry: results.features[i].geometry, // Add the geometry created in step 3
                symbol: lineSymbol2, // Add the symbol created in step 4
              });
              view.graphics.add(resultGraphic);
              //获得
              const intersectionsPoints = geometryEngine.intersectLinesToPoints(
                line,
                results.features[i].geometry
              );
              var point = intersectionsPoints[0];
              console.log(results.features[i],'横截面相交点详细信息');
              const pointGraphic = new Graphic({
                geometry: point,
                symbol: markerSymbol2,
              });
              view.graphics.add(pointGraphic);
              let p1 = [
                hengduanmianLastPoint[0].longitude,
                hengduanmianLastPoint[0].latitude,
              ];
              let p2 = [point.longitude, point.latitude];
              points = [[point.longitude, point.latitude]];
              //将用户绘制的两个点做成线（polyline）
              let tempPath = [p1, p2];
              let tempLine = new Polyline({
                hasZ: false,
                hasM: false,
                paths: tempPath,
                spatialReference: { wkid: 4326 },
              });
              //获取属性字段objectid的值

              arrhengduanmianlist.value.push(
                results.features[i].attributes.objectid
              );
              // console.log(arrhengduanmianlist.value, "===========================");
              //计算交点距离用户绘制线起点的距离
              const Distance = geometryEngine.geodesicLength(
                tempLine,
                "meters"
              );
              var polylinesOne = await getElevation(points);
              console.log("polylinesOne", polylinesOne);
              polylinesOne.forEach(function (point, index) {
                console.log("Sampled " + ": " + point[2]);
                let newpoint = (point[2] + 3).toFixed(2);
                zhexianZ.push(newpoint);
              });
            }
            //获取高程点的z值
            function getElevation(points) {
              let data = map.ground
                .queryElevation(new Multipoint({ points }), {
                  returnSampleInfo: true,
                })
                .then(function (result) {
                  console.log(result.geometry.points);
                  return result.geometry.points;
                })
                // Failed to sample (e.g. service unavailable)
                .catch(function (error) {
                  console.error("Failed to query elevation:", error);
                });
              return data;
            }

            // 发送请求拿到散点图的y坐标数据
            sandianZone = [];
            sandianZtwo = [];

            let ScattersTwo = await findBySurveyno(surveyNoarr.value);
            ScattersTwo.data.forEach((element) => {
              let sdOne = element.positionZ * 1;
              let newSdOne = sdOne.toFixed(2);
              sandianZone.push(newSdOne * 1);
            });

            let ScattersThree = await findBySurveyno(surveyNoarrtwo.value);
            ScattersThree.data.forEach((element) => {
              let sdTwo = element.positionZ * 1;
              let newSdTwo = sdTwo.toFixed(2);
              sandianZtwo.push(newSdTwo * 1);
            });

            menutooltwo.value = true; // 弹出框开启

            nextTick(() => {
              hengduanmiancharts();
            });
          }
        }
        // 当flag=4时执行节点溯源代码
        else if (flag == 4) {
          // 清空添加的线
          view.graphics = [];
          polylineGraphicLayer.graphics = [];
          identify.identify(dylw_dlURL, params).then(function (response) {
            if (response.results.length == "0") {
              ElMessage.error("请点击正确的管点");
            } else if (response.results.length > "0") {
              // console.log(response.results[0].feature, "response.results");
              // 如果geometry的type属性为point的话就拿去这个点的物探编号
              if (response.results[0].feature.geometry.type == "point") {
                // 向后端传递点击点的物探编号
                suyuancan.surveyno =
                  response.results[0].feature.attributes.survey_no;
                traceSource(suyuancan).then((res) => {
                  // console.log(res.data, "节点溯源数据");

                  suyuanobjectid.value = res.data.down.toString();

                  // console.log(suyuanobjectid.value, "suyuanobjectid.value");
                  /** 节点溯源查询-下*/
                  let queryObjectid = new Query();
                  queryObjectid.where = `objectid in (${suyuanobjectid.value})`;
                  //queryObjectid.where = `objectid in ("967","968","969","970","971")`;
                  queryObjectid.outFields = ["*"];
                  queryObjectid.returnGeometry = true;
                  // 定义样式
                  let polylineSymbol = {
                    type: "simple-line", // autocasts as new SimpleMarkerSymbol()
                    // style: "orbicular",
                    color: "#36DA43",
                    // color: [17, 97, 30],
                    width: 5, //pixels
                  };
                  // console.log(queryObjectid.where, "打印拼接出来的语句");
                  query
                    .executeQueryJSON(
                      "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/MapServer/1",
                      queryObjectid
                    )
                    .then(function (results) {
                      // console.log(results, "查询-----------------------------");
                      // 渲染
                      // polylineGraphicLayer.graphics = [];
                      results.features.forEach((item) => {
                        let resultGraphicpolyline = new Graphic({
                          geometry: item.geometry, // set geometry here
                          symbol: polylineSymbol, // set symbol here
                        });
                        polylineGraphicLayer.graphics.push(
                          resultGraphicpolyline
                        );
                      });
                      // view.graphics.add(resultGraphicpolyline);
                    });
                  polylineGraphicLayer.graphics = [];
                  /** */
                  suyuanobjectidup.value = res.data.up.toString();
                  /** 节点溯源查询-上*/
                  let queryObjectidup = new Query();
                  queryObjectidup.where = `objectid in (${suyuanobjectidup.value})`;
                  //queryObjectidup.where = `objectid in ("967","968","969","970","971")`;
                  queryObjectidup.outFields = ["*"];
                  queryObjectidup.returnGeometry = true;
                  // 定义样式
                  let polylineSymbolup = {
                    type: "simple-line", // autocasts as new SimpleMarkerSymbol()
                    // style: "orbicular",
                    color: "#FE583E",
                    width: 5, //pixels
                  };
                  // console.log(queryObjectidup.where, "打印拼接出来的语句");
                  query
                    .executeQueryJSON(
                      "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/MapServer/1",
                      queryObjectidup
                    )
                    .then(function (results) {
                      // console.log(results, "查询-----------------------------");
                      // 渲染
                      // polylineGraphicLayer.graphics = [];
                      results.features.forEach((item) => {
                        let resultGraphicpolylineup = new Graphic({
                          geometry: item.geometry, // set geometry here
                          symbol: polylineSymbolup, // set symbol here
                        });
                        polylineGraphicLayer.graphics.push(
                          resultGraphicpolylineup
                        );
                      });
                      // view.graphics.add(resultGraphicpolyline);
                    });
                  polylineGraphicLayer.graphics = [];
                  /** */
                });
              }
            }
          });
        }
        // gis质量提升点击地图
        if (flag == 5) {
          console.log("flag == 5");

          pointTobeAdd = event.mapPoint.clone();
          console.log("flag=5", pointTobeAdd);
        }
        // if (flag == 7) {
        //       const defectFeatureLayer = new FeatureLayer({
        //     url: "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/FeatureServer/3",
        //     outFields: ["*"],
        //     id: "defectFeatureLayer",
        //    });
        //      console.log('flag=7',pointTobeAdd);
        //      pointTobeAdd.z = undefined;
        //   pointTobeAdd.hasZ = false;
        //   var editFeature = new Graphic({
        //     geometry: pointTobeAdd,
        //     attributes: {
        //       evcode_main: "12345600",
        //       zone_code: "dingqiang",
        //       remark1: "A01",
        //       // 上报照片
        //       uploadpath1: newUploadPhotoPath.value[0].url,
        //       uploadpath2: newUploadPhotoPath.value[1].url,
        //       uploadpath3:newUploadPhotoPath.value[2].url,
        //       // 上报其他材料
        //       uploadpath4: "",
        //     },
        //   });
        //     const edits = {
        //     addFeatures: [editFeature],
        //   };
        //   defectFeatureLayer
        //     .applyEdits(edits)
        //     .then((editsResult) => {
        //       console.log(
        //         editsResult,
        //         "-----------------------------sssssssssssss"
        //       );
        //       // Get the objectId of the newly added feature.
        //       // Call selectFeature function to highlight the new feature.
        //       if (
        //         editsResult.addFeatureResults.length > 0 ||
        //         editsResult.updateFeatureResults.length > 0
        //       ) {
        //         console.log("添加问题成功");
        //       }
        //       // show FeatureTemplates if user deleted a feature
        //       else if (editsResult.deleteFeatureResults.length > 0) {
        //         toggleEditingDivs("block", "none");
        //       }
        //     })
        //     .catch((error) => {
        //       console.log("error = ", error);
        //     });
        // }
      }
      //#region 辅助分析gis质量提升的数据，
      // 辅助分析gis质量提升
      let lw_idname = [];
      let districtName = [];
      let xiaoqutName = [];

      let queryUrldis =
        "http://192.168.0.100:6080/arcgis/rest/services/sd_district/MapServer/2";
      let queryObjectdis = new Query();
      queryObjectdis.where = "1=1";
      queryObjectdis.returnGeometry = true;
      queryObjectdis.outFields = ["*"];
      query
        .executeQueryJSON(queryUrldis, queryObjectdis)
        .then(function (results) {
          // console.log(results.features,'--------------------------------------------------------');
          results.features.forEach((element) => {
            // console.log(element.attributes.subproject_id,"====");
            lw_idname.push({
              label: element.attributes.subproject_name,
              value: element.attributes.subproject_id,
            });
            // console.log(lw_idname,'lw_idname');
          });

          EventBus.emit("resultlw_idname", lw_idname);
        });

      EventBus.on("resultlw_lianweiid", (val) => {
        // console.log(val.value, "vallwid");
        lw_ids.value = val.value;
        // 根据联围id查询区块
        let queryUrllw_id =
          "http://192.168.0.100:6080/arcgis/rest/services/sd_district/MapServer/1";
        let queryObjectlw_id = new Query();
        queryObjectlw_id.where = `lw_id = '${lw_ids.value}'`;
        queryObjectlw_id.returnGeometry = true;
        queryObjectlw_id.outFields = ["*"];
        //  console.log( queryObjectlw_id.where,' lw_ids.value');
        districtName = [];
        query
          .executeQueryJSON(queryUrllw_id, queryObjectlw_id)
          .then(function (results) {
            //  console.log(results.features,'--------------------------------------------------------')

            results.features.forEach((element) => {
              // console.log(element.attributes,"====");

              districtName.push({
                label: element.attributes.district_code,
                value: element.attributes.OBJECTID,
              });

              // console.log(districtName,'lw_idnamedistrictName');
            });
            EventBus.emit("districtName", districtName);
          });
      });
      //  区块
      EventBus.on("resultlw_qukuaiid", (val) => {
        // console.log(val.value, "vallwid");
        // 根据区块id查询小区
        let queryUrlqukuai =
          "http://192.168.0.100:6080/arcgis/rest/services/sd_district/MapServer/0";
        let queryObjectqukuai = new Query();
        queryObjectqukuai.where = `district_id = '${val.value}'`;
        queryObjectqukuai.returnGeometry = true;
        queryObjectqukuai.outFields = ["*"];
        //  console.log( queryObjectqukuai.where,' 区块');
        districtName = [];
        query
          .executeQueryJSON(queryUrlqukuai, queryObjectqukuai)
          .then(function (results) {
            //  console.log(results.features,'--------------------------------------------------------')

            results.features.forEach((element) => {
              // console.log(element.attributes.zone_code,"====");

              xiaoqutName.push({
                label: element.attributes.zone_name,
                value: element.attributes.zone_code,
              });

              // console.log(districtName,'lw_idnamedistrictName');
            });
            EventBus.emit("xiaoqutName", xiaoqutName);
          });
      });

      // 小区
      EventBus.on("resultlw_xiaoquid", (val) => {
        console.log(val.value, "vallwid");
        // 根据区块id查询小区
        let xiaoquurl =
          "http://192.168.0.100:6080/arcgis/rest/services/sd_district/MapServer/0";
        let xiaoqucode = new Query();
        xiaoqucode.where = `zone_code  = '${val.value}'`;
        xiaoqucode.returnGeometry = true;
        xiaoqucode.outFields = ["*"];
        console.log(xiaoqucode.where, " 区块");
        xiaoqutName = [];
        query.executeQueryJSON(xiaoquurl, xiaoqucode).then(function (results) {
          console.log(
            results.features[0].geometry.centroid.latitude,
            "--------------------------------------------------------"
          );
          const fillSymbol = {
            type: "simple-fill", // autocasts as new SimpleFillSymbol()
            color: "transparent",

            outline: {
              // autocasts as new SimpleLineSymbol()
              color: [0, 225, 225],
              width: 3,
            },
          };
          let resultGraphicFace = new Graphic({
            // graphic with line geometry
            geometry: results.features[0].geometry, // set geometry here
            symbol: fillSymbol, // set symbol here
          });
          view.graphics.add(resultGraphicFace);
          let opts = {
            duration: 5000, // Duration of animation will be 5 seconds
          };
          // go to point at LOD 15 with custom duration
          view.goTo(
            {
              center: [
                // longitude为null，报错
                results.features[0].geometry.centroid.longitude,
                results.features[0].geometry.centroid.latitude,
              ],
              zoom: 15,
            },

            opts
          );
        });
        // 清除小区的填充颜色
        view.graphics = [];
      });
      //#endregion
    }
  );
}
//#region 所有的点击事件，弹出框
// ===============================================================================================================
// ================================================================================================================
// 系统编号下拉菜单
// 系统编号下拉菜单
search_list().then((res) => {
  // console.log(res.data,'stats_select');
  const result = res.data;
  result.forEach((item) => {
    // console.log(item,'item');
    //渲染下拉列表
    datalist.searchList.push({ label: item.dictValue, value: item.dictLabel });
  });
});
// 管路寻径点击事件
var chaxun = document.getElementsByClassName("jiaxian-chaxun");
var xunjing = document.getElementsByClassName("jiaxian-xunjing");
var hengduan = document.getElementsByClassName("jiaxian-hengduan");
var suyuan = document.getElementsByClassName("jiaxian-suyuan");
// 查询按钮点击事件
let inquire = () => {
  if (flag == 1) {
    flag = 0;
    chaxun[0].style.color = "";
  } else {
    xunjing[0].style.color = "";
    hengduan[0].style.color = "";
    suyuan[0].style.color = "";
    chaxun[0].style.color = "#f50";
    flag = 1;
    // inquiremenu.value = true;
  }
};
// 管路寻径点击事件
let funtrr = () => {
  if (flag == 2) {
    flag = 0;
    xunjing[0].style.color = "";
  } else {
    // menutool.value = true;
    xunjing[0].style.color = "#f50";
    hengduan[0].style.color = "";
    suyuan[0].style.color = "";
    chaxun[0].style.color = "";
    flag = 2;
    ElMessage({
      message: "请在地图中选择两个并点，可查询两点之间的路径信息",
      type: "success",
    });
  }
};
// 横断面点击事件
let listStr = () => {
  if (flag == 3) {
    flag = 0;
    hengduan[0].style.color = "";
  } else {
    xunjing[0].style.color = "";
    hengduan[0].style.color = "#f50";
    suyuan[0].style.color = "";
    chaxun[0].style.color = "";
    flag = 3;

    ElMessage({
      message: "请在地图中选中两个点，可查询两点之间管线的横断面信息",
      type: "success",
    });
  }
};
// 节点溯源点击事件
let certerne = () => {
  if (flag == 4) {
    flag = 0;
    suyuan[0].style.color = "";
  } else {
    xunjing[0].style.color = "";
    hengduan[0].style.color = "";
    suyuan[0].style.color = "#f50";
    chaxun[0].style.color = "";
    flag = 4;
    ElMessage({
      message: "请在地图中选中一个井点，可对该点进行节点溯源查询",
      type: "success",
    });
  }
};
// 查询节点点击事件
let jiedianClick = () => {
  chaxunTabList.value = !chaxunTabList.value;
  chaxunTabData.value = chaxunTabDataPoint.value;
};
// 查询管线点击事件
let guanxianClick = () => {
  chaxunTabList.value = !chaxunTabList.value;
  chaxunTabData.value = [];
  chaxunTabData.value = chaxunTabDataLine.value;
};
let funterlust = () => {
  funter.value = false;
};
// 右侧编辑的点击事件
let funryuan = () => {
  // centerDialogVisible.value = true;
  bianjiline.value = !bianjiline.value;
};
// 右侧测量的点击事件
let hyuttu = () => {
  jullipo.value = !jullipo.value;
};
// 菜单按钮弹出框--------------------------
const arraySpanMethod = ({ rowIndex, columnIndex }) => {
  if (rowIndex === 0 || rowIndex === 1) {
    if (columnIndex === 1) {
      return [1, 2];
    } else if (columnIndex === 2) {
      return [0, 0];
    }
  }
};

// -------------↑↑---------------------

//#endregion
//#region 定义 的所有数据
const chaxunJiedian = [
  "小区名称",
  "物探编号",
  "箅子数量",
  "点类型",
  "点埋深",
  "可见性",
  "位置",
  "点子类",
  "上传时间",
  "上传账号",
  "节点照片",
  "远景照片",
  "近井照片",
];
const chaxunGuanxian = [
  "小区名称",
  "起点物探编号",
  "终点物探编号",
  "线类型",
  "管子类",
  "埋设方法",
  "起点埋深",
  "终点埋深",
  "上传时间",
  "上传账号",
  "节点照片",
  "远景照片",
  "近井照片",
];

const arrtext = [
  {
    label: "底",
    disabled: true,
    children: [
      {
        label: "天地图",
        disabled: true,
        children: [
          { label: "商业底图" },
          { label: "卫星图" },
        ],
      },
      { label: "地形图" },
    ],
  },
  { label: "注记开关" },
  {
    label: "井点注记-备注",
    children: [
      { label: "系统编号" },
      { label: "物探编号" },
    ],
  },
];

const yuan_mianyuan = [
  {
    label: "生活",
    children: [
      { label: "餐饮" },
      { label: "足疗按摩" },
      { label: "汽修" },
      { label: "农贸菜场" },
      { label: "美容美发" },
      { label: "医疗卫生类" },
      { label: "科研类" },
      { label: "住宿服务类" },
      { label: "综合商业类" },
    ],
  },
  {
    label: "工业",
    children: [
      { label: "家用电器" },
      { label: "机器设备" },
      { label: "纺织服装" },
      { label: "电子信息" },
      { label: "精细化工" },
      { label: "家具制造" },
      { label: "包装印刷" },
      { label: "生物医药" },
      { label: "工业其他" },
    ],
  },
  {
    label: "农业",
    children: [
      { label: "畜牧养殖" },
      { label: "种植" },
      { label: "水产" },
      { label: "屠宰场" },
      { label: "农业其他" },
      { label: "家具制造" },
    ],
  },
  {
    label: "垃圾处理",
    children: [{ label: "垃圾转运场" }, { label: "垃圾填埋场" }],
  },
  {
    label: "施工工地",
    children: [{ label: "道路" }, { label: "小区" }],
  },
];
const yuan_dianyuan = [
  { label: "化粪池" },
  { label: "隔油池" },
  { label: "垃圾点" },
  {
    label: "立管点",
    children: [
      { label: "雨水" },
      { label: "污水" },
      { label: "合流" },
      { label: "截流" },
    ],
  },
];
const wang_guanxian = [
  {
    label: "管",
    children: [
      { label: "雨水管" },
      { label: "污水管" },
      { label: "合流管" },
      { label: "节流管" },
      { label: "虚拟管" },
    ],
  },
  {
    label: "渠",
    children: [
      { label: "雨水渠" },
      { label: "污水渠" },
      { label: "合流渠" },
      { label: "截流渠" },
      { label: "虚拟渠" },
    ],
  },
];
const wang_jingdian = [
  {
    label: "井",
    children: [
      { label: "检查井" },
      { label: "化粪池" },
      { label: "隔油池" },
      { label: "隔油沉砂池" },
      { label: "沉砂池" },
      { label: "垃圾点" },
      { label: "其他池" },
    ],
  },
  {
    label: "箅",
    children: [{ label: "单箅" }, { label: "双箅" }, { label: "多箅" }],
  },
  {
    label: "排",
    children: [
      { label: "雨水" },
      { label: "污水" },
      { label: "合流" },
      { label: "截流" },
    ],
  },
  {
    label: "特",
    children: [
      { label: "立管点" },
      { label: "出户" },
      { label: "入户" },
      { label: "进水口" },
      { label: "出水口" },
      { label: "预留口" },
      { label: "虚拟点" },
      { label: "非探测点" },
      { label: "其他" },
    ],
  },
];
const chang_list = [
  {
    label: "厂站",
    children: [
      { label: "污水处理厂" },
      { label: "水质净化站" },
      { label: "应急污水处理站" },
    ],
  },
  {
    label: "泵站",
    children: [
      { label: "雨水泵站" },
      { label: "污水泵站" },
      { label: "排涝泵站" },
    ],
  },
];
const data3 = [
  {
    id: 1,
    label: "河",
    children: [
      {
        id: 2,
        label: "河道",
        children: [
          { id: 2 - 1, label: "中心线" },
          { id: 2 - 2, label: "范围线" },
          { id: 2 - 3, label: "管理线" },
        ],
      },
      { id: 3, label: "暗涵" },
      { id: 4, label: "断头涌" },
      { id: 5, label: "黑臭水体" },
      { id: 6, label: "小湖塘库" },
      { id: 7, label: "阐" },
      { id: 8, label: "堰" },
    ],
  },
];
const data4 = [
  {
    id: 1,
    label: "城",
    children: [
      { id: 2, label: "二级工区" },
      { id: 3, label: "三级工区" },
      { id: 4, label: "镇街" },
      { id: 5, label: "社区" },
      {
        id: 6,
        label: "地块类型",
        children: [
          { id: 6 - 1, label: "住宅区" },
          { id: 6 - 2, label: "公共机构" },
          { id: 6 - 3, label: "商业区" },
          { id: 6 - 4, label: "城中村" },
          { id: 6 - 6, label: "工业区" },
          { id: 6 - 7, label: "市政路" },
          { id: 6 - 8, label: "其他" },
        ],
      },
      {
        id: 7,
        label: "控制点",
        children: [
          { id: 7 - 1, label: "图根控制点" },
          { id: 7 - 2, label: "其本控制点" },
        ],
      },
      {
        id: 8,
        label: "地勘点",
        children: [
          {
            id: 9,
            label: "分类1",
            children: [
              { id: 9 - 1, label: "标准贯入试验孔" },
              { id: 9 - 2, label: "取土试钻孔" },
            ],
          },
          {
            id: 10,
            label: "分类2",
            children: [
              { id: 10 - 1, label: "控制性钻孔" },
              { id: 10 - 2, label: "一般性钻孔" },
            ],
          },
        ],
      },
    ],
  },
];
const data5 = [
  {
    id: 1,
    label: "问",
    children: [
      { id: 2, label: "无缺陷管段" },
      {
        id: 3,
        label: "结构性缺陷",
        children: [
          {
            id: 3 - 1,
            label: "破裂",
            children: [
              { id: 3 - 1 - 1, label: "破裂一级" },
              { id: 3 - 1 - 2, label: "破裂二级" },
              { id: 3 - 1 - 3, label: "破裂三级" },
              { id: 3 - 1 - 4, label: "破裂四级" },
            ],
          },
          {
            id: 3 - 2,
            label: "变形",
            children: [
              { id: 3 - 2 - 1, label: "变形一级" },
              { id: 3 - 2 - 2, label: "变形二级" },
              { id: 3 - 2 - 3, label: "变形三级" },
              { id: 3 - 2 - 4, label: "变形四级" },
            ],
          },
          {
            id: 3 - 3,
            label: "腐蚀",
            children: [
              { id: 3 - 3 - 1, label: "腐蚀一级" },
              { id: 3 - 3 - 2, label: "腐蚀二级" },
              { id: 3 - 3 - 3, label: "腐蚀三级" },
            ],
          },
          {
            id: 3 - 4,
            label: "错口",
            children: [
              { id: 3 - 4 - 1, label: "错口一级" },
              { id: 3 - 4 - 2, label: "错口二级" },
              { id: 3 - 4 - 3, label: "错口三级" },
            ],
          },
          {
            id: 3 - 5,
            label: "起伏",
            children: [
              { id: 3 - 5 - 1, label: "起伏一级" },
              { id: 3 - 5 - 2, label: "起伏二级" },
              { id: 3 - 5 - 3, label: "起伏三级" },
              { id: 3 - 5 - 4, label: "起伏四级" },
            ],
          },
          {
            id: 3 - 6,
            label: "脱节",
            children: [
              { id: 3 - 6 - 1, label: "脱节一级" },
              { id: 3 - 6 - 2, label: "脱节二级" },
              { id: 3 - 6 - 3, label: "脱节三级" },
              { id: 3 - 6 - 4, label: "脱节四级" },
            ],
          },
          {
            id: 3 - 7,
            label: "接口材料脱落",
            children: [
              { id: 3 - 7 - 1, label: "接口材料脱落一级" },
              { id: 3 - 7 - 2, label: "接口材料脱落二级" },
            ],
          },
          {
            id: 3 - 8,
            label: "支管暗接",
            children: [
              { id: 3 - 8 - 1, label: "支管暗接一级" },
              { id: 3 - 8 - 2, label: "支管暗接二级" },
              { id: 3 - 8 - 3, label: "支管暗接三级" },
            ],
          },
          {
            id: 3 - 9,
            label: "异物穿入",
            children: [
              { id: 3 - 9 - 1, label: "异物穿入一级" },
              { id: 3 - 9 - 2, label: "异物穿入二级" },
              { id: 3 - 9 - 3, label: "异物穿入三级" },
            ],
          },
          {
            id: 3 - 10,
            label: "渗漏",
            children: [
              { id: 3 - 10 - 1, label: "渗漏一级" },
              { id: 3 - 10 - 2, label: "渗漏二级" },
              { id: 3 - 10 - 3, label: "渗漏三级" },
              { id: 3 - 10 - 4, label: "渗漏四级" },
            ],
          },
        ],
      },
      {
        id: 4,
        label: "功能性缺陷",
        children: [
          { id: 4 - 1, label: "沉积" },
          { id: 4 - 2, label: "结垢" },
          { id: 4 - 3, label: "障碍物" },
          { id: 4 - 4, label: "残墙、呗根" },
          { id: 4 - 5, label: "树根" },
          { id: 4 - 6, label: "浮渣" },
          { id: 4 - 6, label: "封堵" },
        ],
      },
      {
        id: 5,
        label: "系统问题",
        children: [
          { id: 5 - 1, label: "逆坡" },
          { id: 5 - 2, label: "瓶颈" },
          { id: 5 - 3, label: "打不开井" },
          { id: 5 - 4, label: "数据异常" },
          { id: 5 - 5, label: "照片缺失" },
        ],
      },
      {
        id: 6,
        label: "人工问题",
        children: [
          { id: 6 - 1, label: "官网完整率异常" },
          { id: 6 - 2, label: "雨污属性异常" },
          { id: 6 - 3, label: "检查井井位异常" },
          { id: 6 - 4, label: "拓扑信息存疑" },
          { id: 6 - 5, label: "其他问题" },
        ],
      },
      { id: 7, label: "无缺陷井" },
      { id: 8, label: "检查井缺陷" },
      { id: 9, label: "雨水箅井缺陷" },
      { id: 10, label: "错混接点" },
      { id: 11, label: "外水入侵点" },
    ],
  },
];
const data6 = [
  {
    id: 1,
    label: "水质",
    children: [
      {
        id: 2,
        label: "监测点类别",
        children: [
          {
            id: 2 - 1,
            label: "源类",
            children: [
              { id: 2 - 2, label: "排水点单位" },
              { id: 2 - 3, label: "城市重点面源" },
              { id: 2 - 4, label: "农业养殖" },
              { id: 2 - 5, label: "工业区" },
            ],
          },
          {
            id: 3,
            label: "网类",
            children: [
              { id: 3 - 1, label: "雨水系统" },
              { id: 3 - 2, label: "污水系统" },
              { id: 3 - 3, label: "合流系统" },
              { id: 3 - 4, label: "截流系统" },
            ],
          },
          {
            id: 4,
            label: "厂类",
            children: [
              { id: 4 - 1, label: "进水前池" },
              { id: 4 - 2, label: "尾水排口" },
            ],
          },
          {
            id: 5,
            label: "河类",
            children: [
              { id: 5 - 1, label: "暗涵" },
              { id: 5 - 2, label: "河涌" },
              { id: 5 - 3, label: "排口" },
              { id: 5 - 4, label: "底泥" },
            ],
          },
        ],
      },
    ],
  },
];
const data7 = [
  {
    id: 1,
    label: "围区",
    children: [
      { id: 2, label: "群力围" },
      { id: 3, label: "南顺联安围" },
      { id: 4, label: "齐杏联网" },
      { id: 5, label: "樵桑联围" },
      { id: 6, label: "中顺大围" },
      { id: 7, label: "第二联围-乐从" },
      { id: 8, label: "第二联围-北滘" },
      { id: 9, label: "容桂联围" },
      { id: 10, label: "第一联围-大良" },
      { id: 11, label: "第一联围-勒流" },
      { id: 12, label: "第一联围-伦教" },
      { id: 13, label: "第一联围-勒流1" },
    ],
  },
];

/*树形结构过滤器
 *参数1数据
 *参数2sql的key
 *参数3子集sql的key
 */
let filterData = (data, key1, key2) => {
  data.forEach((element) => {
    element.sql = `${key1} in ('${element.label}')`;
    if (element.children && element.children.length) {
      element.children.forEach((item) => {
        item.sql = `${element.sql} and ${key2}'${item.label}'`;
      });
    }
  });
};

// 图层点击事件
let tuceng = () => {
  dialogTab.value = true;
  nextTick(() => {
    handleCheckTree('all')
  })
};

const treeRef = ref(null);
var mianyuan_checked = [];
var dianyuan_checked = [];
var guanxian_checked = [];
var jingdian_checked = [];
var chang_checked = [];
// var all_checked = [];

// #region  图例的拼接
let handleClickllo = () => {
  if (activelist.value == "Muen") {
    huuymol.value = false;
  } else {
    huuymol.value = true;
  }
  nextTick(() => {
    if (activelist.value == "源-面源") {
      treeRef.value.setCheckedKeys(mianyuan_checked);
    } else if (activelist.value == "源-点源") {
      treeRef.value.setCheckedKeys(dianyuan_checked);
    } else if (activelist.value == "网-管线") {
      treeRef.value.setCheckedKeys(guanxian_checked);
    } else if (activelist.value == "网-井点") {
      treeRef.value.setCheckedKeys(jingdian_checked);
    } else if (activelist.value == "厂") {
      treeRef.value.setCheckedKeys(chang_checked);
    }
  });
};


//图层控制点击选中事件--过滤数据后触发地图更新
let handleCheckTree = (type) => {
  if (type && type == 'all') {

  } else {
    var arr = treeRef.value.getCheckedKeys();
    if (activelist.value == "源-面源") {
      mianyuan_checked = JSON.parse(JSON.stringify(arr));
    } else if (activelist.value == "源-点源") {
      dianyuan_checked = JSON.parse(JSON.stringify(arr));
    } else if (activelist.value == "网-管线") {
      guanxian_checked = JSON.parse(JSON.stringify(arr));
    } else if (activelist.value == "网-井点") {
      jingdian_checked = JSON.parse(JSON.stringify(arr));
    } else if (activelist.value == "厂") {
      chang_checked = JSON.parse(JSON.stringify(arr));
    }
  }
  const dylw_dlURL =
    "http://192.168.0.100:6080/arcgis/rest/services/dylw_dl/MapServer";
  const dylw_dlLayer = new MapImageLayer_data({
    url: dylw_dlURL,
  });
  var id_0 = [...filterSql(dianyuan_checked, 'subtype'), ...filterSql(jingdian_checked, 'subtype'), ...filterSql(chang_checked, 'subtype')]
  var id_1 = [...filterSql(guanxian_checked, 'subtype')]
  var id_8 = [...filterSql(mianyuan_checked, 'drainsubtype'),]
  console.log(id_0)
  console.log(id_0.join(' or '))
  console.log(id_1)
  console.log(id_1.join(' or '))
  console.log(id_8)
  console.log(id_8.join(' or '))
  console.log("test" + id_0.join(' or '))
  EventBus.emit("lizf", id_0.join(' or '));
  //dylw_dlLayer.findSublayerById(0).definitionExpression = id_0.join(' or ');
  //dylw_dlLayer.findSublayerById(1).definitionExpression = id_1.join(' or ');
  // dylw_dlLayer.findSublayerById(8).definitionExpression = id_8.join(' or ');
};

//拼接sql
let filterSql = (data, key2) => {
  //先map分割数组
  var arr = data.map(str => {
    const [key, value] = str.split(' and ');
    return { [key]: value ? value : '' };
  })
  //再用reduce函数把相同key的合并为一个
  arr = arr.reduce((acc, obj) => {
    const key = Object.keys(obj)[0]; // 获取对象的第一个属性作为键名  
    acc[key] = acc[key] ? acc[key] + obj[key] : obj[key]; // 合并值  
    return acc;
  }, {});
  var arr2 = []
  for (const key in arr) {
    if (arr[key]) {
      let regex = new RegExp(`\\b${key2}\\b`, 'g');
      arr[key] = arr[key].replace(regex, ',') //key2替换为,
      arr[key] = `${key} and ${key2} in (${arr[key].replace(',', '')})` //删除第一个逗号
    } else {
      arr[key] = key
    }
    arr2.push(arr[key])
  }
  return arr2
}
//全选
let checkAll = (value1, value2) => {
  let arr = treeRef.value.data.map((node) => node.label);
  treeRef.value.setCheckedNodes(treeRef.value.data);

  handleCheckTree();
};
//全不选
let CheckOutAll = (value1, value2) => {
  treeRef.value.setCheckedNodes([]);

  handleCheckTree();
};

let moopeet = (index) => {
  if (index.index == 1) {
    huuymol.value = false;
  }
};

let listLegEnd = reactive([
  {
    list: "图例",
  },
  {
    list: "开启系统图例",
  },
]);
let legend = () => {
  LegEnd.value = true;
};
let LegEndagv = () => {
  LegEnd.value = false;
  LegEndtwo.value = false;
};
let showindex = ref(0);
let tabhcheng = (e) => {
  // console.log(e.index);
  showindex.value = e.index;
  if (showindex.value == 2) {
    var listwid = document.getElementById("LegEnd");
    listwid.style.width = "700px";
    // listwid.style.height = "500px";
  } else {
    var listwid = document.getElementById("LegEnd");
    listwid.style.width = "300px";
    // listwid.style.height = "500px";
  }
};

let tabsClick = (e) => {
  if (e.index == 0 || e.index == 1) {
    var listwid = document.getElementById("LegEnd");
    listwid.style.width = "300px";
    // listwid.style.height = "500px";
  } else if (showindex.value == 2) {
    var listwid = document.getElementById("LegEnd");
    listwid.style.width = "700px";
    // listwid.style.height = "500px";
  }
};
let shoindex = (index) => {
  console.log(index);
  if (index == 1) {
    var indexlist = document.getElementById("LegEnd");
    // indexlist.style.right = "400px";
    LegEndtwo.value = !LegEndtwo.value;
  }
};

//#endregion
//#region  管路寻径，横断面echarts图封装

//#region 管路寻径echarts图
/**---------------------管路寻径--------------------------------------- */
function gunluxunjingecharts() {
  let mychart = echarts.init(document.querySelector("#echartstool"));
  var option;
  // 图例数据
  var legendData = ["管道线", "井底标高线", "地表标高线", "管道", "全选"];
  let selected = {};
  for (let i = 0; i < legendData.length; i++) {
    selected[legendData[i]] = true;
  }
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      // formatter: function (params) {
      //   var tar = params[0];
      // // return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
      // },
    },
    // 图例↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    legend: {
      type: "plain",
      // orient: "vertical",
      left: 100,
      top: 20,
      data: legendData,
      selected: {
        全选: true,
        管道线: true,
        井底标高线: true,
        地表标高线: true,
        11: false,
      },
      selectedMode: "multiple", // 开启多选模式
      textStyle: {
        color: "#000",
        fontSize: 16,
      },
    },
    // 滚动条↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    dataZoom: [
      {
        filterMode: "empty",
        type: "slider",
        show: true,
        handleSize: 20, // 滑动条的 左右2个滑动条的大小
        height: 20, // 组件高度
        bottom: 20, // 右边的距离
        handleColor: "#ddd", // h滑动图标的颜色
        handleStyle: {
          // 两侧缩放手柄的样式配置。
          borderColor: "#cacaca",
          borderWidth: "1",
          shadowBlur: 2,
          background: "#ddd",
          shadowColor: "#ddd",
        },
        backgroundColor: "white", // 两边未选中的滑动条区域的颜色
      },
      // 下面这个属性是拖到里面
      {
        type: "inside",
        show: true,
        start: 1,
        end: 100,
      },
      // 竖型滚动条
      {
        type: "slider",
        width: 20,
        show: true,
        yAxisIndex: [0],
        // left: "93%",
        start: 0,
        end: 100,
      },
    ],
    // 图的位置
    grid: {
      left: "3%",
      right: "4%",
      bottom: "15%",
      containLabel: true,
    },
    xAxis: {
      // show:true,
      // data:[0,1],
      type: "category",
      splitLine: { show: false },
      splitLine: {
        // 表格里面X轴线条
        show: true,
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        barWidth: 20, //柱子宽度
        type: "bar",
        stack: "Total",
        itemStyle: {
          borderColor: "transparent",
          color: "transparent",
        },
        emphasis: {
          itemStyle: {
            borderColor: "#ccc",
            color: "#ccc",
          },
        },
        //   底部高度
        // data: [1.5, 1.31,1.4],
        data: arrdbbglist.value,
      },
      // 竖向柱状图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
      {
        name: "管道线",
        type: "bar",
        stack: "Total",
        itemStyle: {
          borderColor: "#f50",
          color: "#f50",
        },
        label: {
          // show: true,
          position: "top",
        },
        //   高度
        data: resultb.value,
        // data:[1.35,1.5,1.4],
      },
      // 横向柱状图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

      {
        name: "Direct",
        type: "line",
        stack: "Total2",
        showSymbol: false, //是否默认展示圆点
        areaStyle: {},
        itemStyle: {
          borderColor: "transparent",
          color: "transparent",
        },
        emphasis: {
          focus: "series",
        },
        // data: [1.5,1.5,1.5]
        data: arrdbbglist.value,
      },
      {
        name: "管道",
        type: "line",
        showSymbol: false, //是否默认展示圆点
        stack: "Total2",
        label: {
          show: true,
          position: "top",
        },
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        // 渲染管直径的数据
        // data: [ 0.4, 0.4,0.4]
      },

      // 折线图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
      {
        name: "井底标高线",
        data: arrdbbglist.value,

        // data: [2.85,2.81,2.8],
        type: "line",
        showSymbol: false, //是否默认展示圆点
        itemStyle: {
          normal: {
            lineStyle: {
              type: "dashed",
              width: 1, //折线宽度
              color: "#F50", //折线颜色
            },
          },
        },
      },
      // 折线图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
      {
        name: "地表标高线",
        // data: [1.5,1.31,1.4],
        data: resultarr.value,

        type: "line",
        showSymbol: false, //是否默认展示圆点
        itemStyle: {
          normal: {
            lineStyle: {
              type: "dashed",
              width: 1, //折线宽度
              color: "#F50", //折线颜色
            },
          },
        },
      },
      {
        //全选按钮的假数据
        name: "全选",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 13,
        lineStyle: {
          normal: {
            width: 10,
            shadowColor: "rgba(155, 18, 184, .4)",
            shadowBlur: 5,
            shadowOffsetY: 20,
            shadowOffsetX: 0,
            color: "#fb7636",
          },
        },
        itemStyle: {
          color: "#00FFF0",
          borderColor: "#fff",
          borderWidth: 2,
        },

        data: [],
      },
    ],
  };
  mychart.setOption(option);
  //增加全选功能
  mychart.on("legendselectchanged", (e) => {
    let name = e.name;
    let allSelect = "全选";
    if (name === allSelect) {
      //全选的点击事件
      for (let key in e.selected) {
        option.legend.selected[key] = e.selected[allSelect];
      }
    } else {
      //普通多选框的点击事件
      option.legend.selected[name] = e.selected[name];
      if (e.selected.name == false) {
        // 当前选中设置为false时
        option.legend.selected[allSelect] = false;
      } else {
        // 当前选中设置为true时
        let arr = Object.values(e.selected).splice(1);
        let flag = arr.every((currentValue) => {
          return currentValue == true;
        });
        option.legend.selected[allSelect] = flag;
      }
    }
    mychart.setOption(option);
  });
  mychart.setOption(option);
}
//#endregion

//#region 横截面echarts图
/**----------------------横截面------------------------------------ */
function hengduanmiancharts() {
  var myChart = echarts.init(document.querySelector("#echartstooltwo"));

  console.log(sandianZone, sandianZtwo, "两个值");
  // 求两个数组中对应索引的平均值
  function averageOfArrays(sandianZone, sandianZtwo) {
    // 计算平均值并构建新的数组
    const result = [];
    for (let i = 0; i < sandianZone.length; i++) {
      result.push((sandianZone[i] + sandianZtwo[i]) / 2);
    }

    return result;
  }
  const new_arr = averageOfArrays(sandianZone, sandianZtwo);
  // 初始化echarts实例
  // 渲染图表
  var option;
  sandiandata.value = [];
  zhexiandata.value = [];
  // 散点图的数据
  arrhengduanmianlist.value.forEach((element, i) => {
    sandiandata.value.push([element / 100, new_arr[i].toFixed(2)]);
  });
  // 折线图数据
  arrhengduanmianlist.value.forEach((element, i) => {
    zhexiandata.value.push([element / 100, zhexianZ[i]]);
    console.log(zhexianZ[i], "折线图数据");
  });
  sandianlist.value = [];
  sandianlist = sandiandata.value;
  var legendData = ["地表标高", "管线标高", "全选"];
  option = {
    legend: {
      type: "plain",
      // orient: "vertical",
      left: 100,
      top: 20,
      data: legendData,
      selected: {
        全选: true,
        管线标高: true,
        地表标高: true,
      },
      selectedMode: "multiple", // 开启多选模式
      textStyle: {
        color: "#000",
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      }
    },
    xAxis: {
      type: "category",
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      splitLine: { show: false },
      splitLine: {
        // 表格里面X轴线条
        show: true,
      },
    },
    yAxis: {
      type: "value",
    },
    dataZoom: [
      {
        type: "slider",
        show: true,
        handleSize: 20, // 滑动条的 左右2个滑动条的大小
        height: 20, // 组件高度
        bottom: 20, // 右边的距离
        handleColor: "#ddd", // h滑动图标的颜色
        handleStyle: {
          // 两侧缩放手柄的样式配置。
          borderColor: "#cacaca",
          borderWidth: "1",
          shadowBlur: 2,
          background: "#ddd",
          shadowColor: "#ddd",
        },
        backgroundColor: "white", // 两边未选中的滑动条区域的颜色
      },
      // 下面这个属性是拖到里面
      {
        type: "inside",
        show: true,
        start: 1,
        end: 100,
      },
      // 竖型滚动条
      {
        type: "slider",
        width: 20,
        show: true,
        yAxisIndex: [0],
        // left: "93%",
        start: 1,
        end: 100,
      },
    ],
    series: [
      {
        name: "地表标高",
        data: zhexiandata.value,
        type: "line",
      },
      // 散点图
      {
        name: "管线标高",
        symbol: "circle", // 使用圆形的标记
        symbolSize: function (sandianlist) {
          return sandianlist[0];
        },
        data: sandiandata.value.map(function (item) {
          return {
            value: item,
            symbol: "circle",
            // symbolSize:
            itemStyle: {
              color: "transparent", // 设置颜色为透明，实现空心圆效果
              borderColor: "red", // 设置边框颜色，默认为黑色
              borderWidth: 2, // 设置边框宽度
            },
          };
        }),

        type: "scatter",
      },
      {
        //全选按钮的假数据
        name: "全选",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 13,
        lineStyle: {
          normal: {
            width: 10,
            shadowColor: "rgba(155, 18, 184, .4)",
            shadowBlur: 5,
            shadowOffsetY: 20,
            shadowOffsetX: 0,
            color: "#fb7636",
          },
        },
        itemStyle: {
          color: "#00FFF0",
          borderColor: "#fff",
          borderWidth: 2,
        },

        data: [],
      },
    ],
  };
  myChart.setOption(option);
  //增加全选功能
  myChart.on("legendselectchanged", (e) => {
    let name = e.name;
    let allSelect = "全选";
    if (name === allSelect) {
      //全选的点击事件
      for (let key in e.selected) {
        option.legend.selected[key] = e.selected[allSelect];
      }
    } else {
      //普通多选框的点击事件
      option.legend.selected[name] = e.selected[name];
      if (e.selected.name == false) {
        // 当前选中设置为false时
        option.legend.selected[allSelect] = false;
      } else {
        // 当前选中设置为true时
        let arr = Object.values(e.selected).splice(1);
        let flag = arr.every((currentValue) => {
          return currentValue == true;
        });
        option.legend.selected[allSelect] = flag;
      }
    }
    myChart.setOption(option);
  });
  myChart.setOption(option, true);
}
//#endregion
//#endregion
</script>
<style scoped>
#mapview {
  position: absolute;
  width: 100%;
  height: 100%;
}

.rightco {
  position: absolute;
  right: 0;
  height: 260px;
  margin-top: 143px;
  background-color: rgb(250, 249, 252);
  opacity: 0.8;
  width: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border-radius: 10px;
  border: #ccc 1px solid;
}

.LegEnd {
  width: 290px;
  height: 410px;
  background-color: #fff;
  position: absolute;
  top: 396px;
  margin: 0;
  right: 92px;
}

.LegEndtwo {
  width: 300px;
  height: 410px;
  background-color: #fff;
  position: absolute;
  top: 396px;
  margin: 0;
  right: 400px;
}

.LegEnd-concat {
  display: flex;
  justify-content: space-around;
  height: 30px;
  font-size: 18px;
}

.tuli-lenend {
  padding: 10px;
}

.LegEnd-list {
  line-height: 30px;
  padding: 5px;
  width: 80%;
}

.LegEnd-agv {
  padding: 7px;
}

#listbox,
#factory,
#mesh,
#rivers,
#city,
#askOne {
  height: 300px;
}

/* 图层图例测量人员框样式 */
.right-1 {
  margin-left: 28px;
  cursor: pointer;
  /* background-color: yellowgreen; */
}

.right-1>span {
  display: block;
  width: 55px;
  height: 20px;
}

.listyee {
  margin-left: 9px;
}

#listuut {
  margin-top: 12px;
}

.loppkui {
  width: 500px;
  height: 30px;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: auto;
}

/* 测量按钮尺寸 */
#topbar {
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: fixed;
  bottom: 100px;
  background-color: #fff;
  padding: 5px;
}

#distanceButton {
  width: 190px;
  height: 40px;
  background-color: white;
  /* margin-bottom: 20px; */
}

#areaButton {
  width: 190px;
  height: 40px;
  background-color: white;
}

/* .esri-widget--panel {
  top: 300px !important;
} */

/* 菜单按钮样式（查询，管路寻径....） */
#inquire-menu {
  font-size: 20px;
}

.nuttyyt {
  position: absolute;
  right: 600px;
  top: 100px;
  /* width: 168px; */
  width: 204px;
  display: flex;
  height: 44px;
  /* border: 1px solid #ccc; */
  line-height: 59px;
  background-color: white;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.jiaxian-chaxun,
.jiaxian-xunjing,
.jiaxian-hengduan,
.jiaxian-suyuan,
.jiaxian-qingchu,
.jiaxian-huishui {
  width: 100%;
  height: 34px;
  text-align: center;
  cursor: pointer;
  border-right: 1px solid #ccc;
  color: #28262667;
  /* background-color: #000; */
}

.sha {
  /* width: 152px; */
  width: 194px;
  display: flex;
  justify-content: space-between;
  height: 34px;
  border: 1px solid #ccc;
  line-height: 40px;
  /* background-color: #000; */
}

/* .jiaxian-chaxun,.jiaxian-xunjing,.jiaxian-hengduan,.jiaxian-suyuan :hover {
  border: 1px solid #000;
} */

/* 菜单按钮弹出框样式 */
#from {
  width: 100%;
  /* height: 300px; */
  /* background-color: yellow; */
  text-align: center;
}

/* 地图编辑弹出框 */
#edit {
  position: absolute;
  right: 100px;
  height: 600px;
  z-index: 50000;
}

/* 新加点线面样式 ↓ */
#sketchPanel {
  width: 200px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
}

.esri-button {
  margin: 2px;
}

#configurationDiv {
  padding: 10px;
  text-align: left;
  width: 250px;
}

#configurationInfoDiv {
  padding: 7px;
  text-align: left;
}

#snappingctrlkey {
  display: inline;
}

#actionbuttons,
#edgeoperationbuttons {
  display: none;
}

#exportExcel {
  display: none;
}

.update-options {
  display: flex;
  flex-direction: row;
}

.edge-button,
.shape-button {
  flex: 1;
  border-style: solid;
  border-width: 1px;
  border-image: none;
}

.edge-button-selected,
.shape-button-selected {
  background: #4c4c4c;
  color: #fff;
}

/* ↑ */
.tucengstyle {
  height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
}

.topr {
  position: absolute;
  right: 70px;
  display: flex;
  top: 100px;
}

.nutty {
  display: flex;
}

/* echarts图样式 */
#echartstool {
  width: 900px;
  height: 370px;
}

#Select-all {
  width: 50px;
  height: 30px;
  border-radius: 20px;
  position: absolute;
  top: 74px;
  left: 660px;
}

#Inverse {
  width: 50px;
  height: 30px;
  border-radius: 20px;
  position: absolute;
  top: 74px;
  left: 720px;
}

#echartstooltwo {
  width: 900px;
  height: 700px;
}

.levelMapDialog {
  width: 500px;
  height: 550px;
  position: fixed;
  top: 100px;
  left: 0;
  z-index: 2000;
  background-color: #fff;
  border: 1px solid #000;
  font-size: 14px;
  padding: 20px 0;
}

.levelMapDialog .title {
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
}
</style>
  